html – CSS Gradient动画无法正常工作

发布时间：2020-12-14 22:29:15 所属栏目：资源来源：网络整理

导读：我正在尝试制作动画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 infinit

我正在尝试制作动画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/

解决方法

是的….你必须关闭你的身体css,并自己拥有你的关键帧动画.喜欢这个 http://jsfiddle.net/9s9g6ktu/1/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!