无限滑动CSS3渐变 [英] Infinitely sliding CSS3 gradient
本文介绍了无限滑动CSS3渐变的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个简单的动画,它对角地来回跳动,我希望它不断滑动而不是来回跳动.这是我的代码:
I have this simple animation that pulses back and forth diagonally, I would like it to slide endlessly instead of pulsing back and forth. Here is my code:
body {margin: 0; padding: 0;}
.error-con {
background: rgba(255, 0, 89, 1);
background: -moz-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255, 0, 89, 1)), color-stop(100%, rgba(0, 179, 255, 1)));
background: -webkit-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
background: -o-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
background: -ms-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
background: linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
background-size: 400% 400%;
-webkit-animation: errorBg 55s ease infinite;
-moz-animation: errorBg 55s ease infinite;
animation: errorBg 55s ease infinite;
height: 100vh;
}
@-webkit-keyframes errorBg {
0% {
background-position: 93% 0%
}
50% {
background-position: 0% 100%
}
100% {
background-position: 93% 0%
}
}
@-moz-keyframes errorBg {
0% {
background-position: 93% 0%
}
50% {
background-position: 0% 100%
}
100% {
background-position: 93% 0%
}
}
@keyframes errorBg {
0% {
background-position: 93% 0%
}
50% {
background-position: 0% 100%
}
100% {
background-position: 93% 0%
}
}
<div class="error-con"></div>
我尝试删除了50%的关键帧,但这只是使整个过程跳回到了最后一个关键帧的开头.有任何想法吗?
I tried removing the 50% keyframe but that just made the whole thing jump back to the start at the last keyframe. Any ideas?
推荐答案
问题是您的渐变.对于无限循环,您应该具有四种颜色:
The problem is your gradient. For an infinite loop you should have four colors:
我已在此小提琴中修复了您的代码
background: -webkit-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 33%, rgba(255, 0, 89, 1) 66%, rgba(0, 179, 255, 1) 100%);
这篇关于无限滑动CSS3渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文