logo标签列表

CSS渐变动画不起作用

htmlcssgradient
6
我正在尝试制作CSS渐变动画背景，我正在这个页面上生成渐变的CSS：http://www.gradient-animator.com/ 这是CSS代码:
body {
background: linear-gradient(270deg, #18f0b8, #18a2f0, #db5640);
background-size: 600% 600%;
-webkit-animation: Gradient 60s ease infinite;
-moz-animation: Gradient 60s ease infinite;
animation: Gradient 60s ease infinite;
@-webkit-keyframes Gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes Gradient { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
}

输出的渐变效果很好，但无法动画化。我是否遗漏了什么？这是代码示例：http://jsfiddle.net/9s9g6ktu/

1个回答
9
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接