我正在尝试添加一个背景动画,该动画将从右向左移动并干净地循环。到目前为止,动画使用关键帧从右到左运行,但 30 秒后它会停止并重新开始。它看起来不是很干净和光滑。有没有其他解决方案?
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("/media/background.svg");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 30s;
animation-iteration-count: infinite;
}
@keyframes slide {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}
最佳答案
将50%
关键帧更改为100%
关键帧,并将结束背景位置设置为-100vw
。
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}
与animation-timing-function: Linear
相同的想法:
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}
关于javascript - 背景动画流畅循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59957998/