这个动画不工作。我不知道为什么。有人可以帮我吗?
body {
background: linear-gradient(227deg, #8d369b, #3aa9bb, #e145f2);
background-size: 600% 600%;
-webkit-animation: Test 36s ease infinite;
-moz-animation: AnimationName 36s ease infinite;
animation: AnimationName 36s ease infinite;
@-webkit-keyframes Test {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@-moz-keyframes Test {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@keyframes Test {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}}
我希望我的背景具有渐变效果。上面的代码有什么问题?
最佳答案
您正在为 body
标签定义关键帧。您还为 -moz-animation
和 animation
定义了错误的 animation-name
。这是您的 CSS 的固定版本。
body {
background-image: linear-gradient(227deg, #8d369b, #3aa9bb, #e145f2);
background-size: 600% 600%;
-webkit-animation: Test 36s ease infinite;
-moz-animation: Test 36s ease infinite;
animation: Test 36s ease infinite;
}
@-webkit-keyframes Test {
0% {
background-position: 0% 51%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 51%
}
}
@-moz-keyframes Test {
0% {
background-position: 0% 51%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 51%
}
}
@keyframes Test {
0% {
background-position: 0% 51%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 51%
}
}
关于CSS背景渐变动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37184684/