0
我試過在線搜索,但無法找到像https://verily.com/那樣實現移動背景循環的方式,請注意顏色如何變化?如何實現移動後臺循環?
我試過在線搜索,但無法找到像https://verily.com/那樣實現移動背景循環的方式,請注意顏色如何變化?如何實現移動後臺循環?
您可以使用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%}
}
希望這有助於!
試試這個。
.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; }
}