如何实现移动后台循环？

Question

我试过在线搜索，但无法找到像https://verily.com/那样实现移动背景循环的方式，请注意颜色如何变化？

Answer 1

您可以使用CSS的@keyframes来制作渐变动画。看看下面的代码片段：

body { 
 
    background: linear-gradient(270deg, #ffc800, #41a93e, #00b2fe, #9300fe, #fe009f); 
 
    background-size: 1000% 1000%; 
 

 
    -webkit-animation: bg-gradient-animate 44s ease infinite; 
 
    -moz-animation: bg-gradient-animate 44s ease infinite; 
 
    -o-animation: bg-gradient-animate 44s ease infinite; 
 
    animation: bg-gradient-animate 44s ease infinite; 
 
} 
 

 
@-webkit-keyframes bg-gradient-animate { 
 
    0%{background-position:0% 50%} 
 
    50%{background-position:100% 50%} 
 
    100%{background-position:0% 50%} 
 
} 
 
@-moz-keyframes bg-gradient-animate { 
 
    0%{background-position:0% 50%} 
 
    50%{background-position:100% 50%} 
 
    100%{background-position:0% 50%} 
 
} 
 
@-o-keyframes bg-gradient-animate { 
 
    0%{background-position:0% 50%} 
 
    50%{background-position:100% 50%} 
 
    100%{background-position:0% 50%} 
 
} 
 
@keyframes bg-gradient-animate { 
 
    0%{background-position:0% 50%} 
 
    50%{background-position:100% 50%} 
 
    100%{background-position:0% 50%} 
 
}

希望这有助于！

Answer 2

试试这个。

.BackgroundFading { 
    height:200px; 
    width:200px; 
    background: black; 
    animation: fading 4s infinite; 
    -webkit-animation: fading 4s infinite; 
} 
@keyframes fading { 
    0% { background: black; } 
    33% { background: red; } 
    66% { background: blue; } 
    100% { background: black; } 
} 

@-webkit-keyframes fading { 
    0% { background: black; } 
    33% { background: red; } 
    66% { background: blue; } 
    100% { background: black; } 
} 

参见：https://jsfiddle.net/a3xttweu/