全屏 CSS 旋转背景

Question

I am trying to replicate (in css) a background that i saw on a figma project on tiktok.

It's basically a spinning conic gradient background.

The problem is that I can't get it to work fullscreen.

You can see what I have to far here:

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

Any tips?

Thanks

Answer 1

I think that I fixed it.

.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