CSS Rotate Animation (color only)-CodePudding

How can I make a smooth infinite spin animation from 0deg to 360deg? But I only want to make the color spin while the rest of the text stay still.

body {
background: conic-gradient(#fff, #000);

}

I was trying this but it is rotating the entire page. So I think I need something different rather than the CSS below

body {
background: conic-gradient(#fff, #000);
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

Probably I need a color animation rather than rotating a static background conic gradient

CodePudding user response：

It's rotating the entire page because you've set it to rotate the entire page.

I'd recommend making a container div inside your body, making that take up the full background width and height, and animating that.

i.e;

<body>
    <div ></div>
    <!-- Rest of content -->
</body>

.anim-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  /* Your animation CSS */
}

CodePudding user response：

Consider a pseudo element:

html:before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -75%;
  background: conic-gradient(#fff, #000);
  animation: spin 4s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}