本文介绍了如何使用CSS的@keyframes规则创建一个背景图片水平滚动的动画效果。通过设置background-position属性，从0%到100%改变图片的位置，实现无缝循环滚动。示例代码中包含了一个名为.scroll30slinearinfinite的动画，应用于.bgImg类，使得背景图片每隔30秒线性无限次滚动。
css代码
@keyframes scroll {
0% {
background-position: 0 0;
}
100% {
background-position:-1020px 0; //图片的宽度
}
}
.bgImg{
/* width:270%; */
height:100%;
background:url(../images/bgimg.png) repeat-x;
background-position: left center;
animation: scroll 30s linear infinite;
}
html代码
<body>
<div class="bgImg"></div>
</body>
图片最好是左右能衔接上的。
转载
https://blog.csdn.net/huayuaer/article/details/101539423
扫一扫
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
