今天用css写了个图片连续横向滚动，完成效果如下：
总共用了两张图，一张背景图，一张滚动图，html结构如下：
然后是css/*动画1*/
@keyframesrollimg1{
0%{
left:0;
}
100%{
left:-100%;
}
}
/*动画1*/
@keyframesrollimg2{
0%{
left:100%;
}
100%{
left:0;
}
}
/*最外层*/
.img-box{
position:relative;
overflow:hidden;
}
/*背景图*/
.img-box>img{
display:block;
position:relative;
line-height:1;
width:100%;
height:auto;
z-index:1;
}
/*最开始滚动的图片*/
.roll-img1{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
overflow:hidden;
animation:rollimg112sinfinitelinear;
display:flex;
align-items:center;
}
/*接着滚动的图片*/
.roll-img2{
position:absolute;
top:0;
left:100%;
width:100%;
height:100%;
z-index:2;
overflow:hidden;
animation:rollimg212sinfinitelinear;
display:flex;
align-items:center;
}
以上就是用css的“@keyframes”动画效果来实现图片横向滚动的全部代码了，调节滚动速度修改“animation”里面的“12s”中的数字即可。
如果觉得《html图片左右自动滚动代码 css实现的图片连续横向滚动效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
