全屏 CSS 旋轉背景

Question

我正在嘗試復制（在 css 中）我在 tiktok 的 figma 項目中看到的背景。

它基本上是一個旋轉的圓錐漸變背景。

問題是我無法讓它全屏工作。

你可以在這里看到我所要做的：

html, body {
   margin: 0;
   width: 100vw;
   height: 100vh;
}

body {
   background: #000;
}

#conic-bg {
   width: 100vw;
   height: 100vh;
   position: relative;
   overflow: hidden;
   
   /* Center text */
   text-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-flex;
   display: flex;
}

#conic-bg::before {
   background-image: conic-gradient(red, yellow);
   content: "";
   width: 100vw;
   height: 100vh;
   position: absolute;
   animation: spin 3s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

.content {
   font-size: 1.5vw;
   line-height: 0;
   color: #fff;
   position: relative;
   margin: 0 auto;
}

.text {
   margin: 0;
   padding: 0;
   font-weight: bold;
   font-size: 4vw;
   line-height: 3vw;
}

https://codepen.io/makemept/pen/mdKNagg

有小費嗎？

謝謝

Answer 1

我想我修好了。

.out {
  width:100vw;
  height:100vh;
  overflow:hidden;
  position: absolute;
  top: 0%;
  left: 0%;
}

.in {
    position: absolute;
    top: -150vh;
    left: -150vw;
    width: 400vw;
    height: 400vh;
  background-image: conic-gradient(red, yellow);
    animation:spin 5s linear infinite;
}
    
@keyframes spin { 100% { transform:rotate(360deg);transform-origin: center; } }

https://codepen.io/makemept/pen/mdKNagg