css CSS渐变动画

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css CSS渐变动画相关的知识，希望对你有一定的参考价值。

background: linear-gradient(143deg, #244f66, #666124, #21f211, #af8ce1, #ff00d3, #003dfb, #af8ce1, #a7e18c, #dfe18c, #d02f35);
background-size: 2000% 2000%;
-webkit-animation: AnimationName 1s ease infinite;
-moz-animation: AnimationName 1s ease infinite;
-o-animation: AnimationName 1s ease infinite;
animation: AnimationName 1s ease infinite;
@-webkit-keyframes AnimationName {
    0%{background-position:0% 66%}
    50%{background-position:100% 35%}
    100%{background-position:0% 66%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 66%}
    50%{background-position:100% 35%}
    100%{background-position:0% 66%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 66%}
    50%{background-position:100% 35%}
    100%{background-position:0% 66%}
}
@keyframes AnimationName {
    0%{background-position:0% 66%}
    50%{background-position:100% 35%}
    100%{background-position:0% 66%}
}

以上是关于css CSS渐变动画的主要内容，如果未能解决你的问题，请参考以下文章