css让图片自动滚动

转自于：https://www.yzktw.com.cn/post/1051445.html

CSS让图片自动滚动是一种非常实用的功能，它可以让网站的页面更加动态和生动。实现这个功能的方法也非常简单，只需要使用CSS中的滚动条属性即可。

/* 将所有图片都放在一个div内 */

.scroll {
overflow: auto; /* 设置滚动条 */
white-space: nowrap; /* 将所有内容在一行内显示 */
}

以上代码中，我们设置了一个名为.scroll的class，将所有的图片都放在了一个

标签内。然后，我们使用CSS的overflow和white-space属性来设置滚动条的样式以及将所有内容都在一行内显示。

 

这样，所有的图片就会自动按照一定的速度在网页上滚动显示了。如果想要调整滚动条的速度，可以使用CSS中的animation属性来实现。

.scroll img {
animation: scroll 10s linear infinite; /* 设置动画 */
}
/* 定义动画 */
@keyframes scroll {
from {
transform: translateX(0); /* 初始位置 */
}
to {
transform: translateX(-100%); /* 结束位置 */
}
}　

以上代码中，我们设置了一个animation属性，用来实现滚动条的动画效果。通过设置from和to两个关键帧，我们将图片从初始位置滚动到结束位置，而linear关键字则表示滚动速度是匀速的。

 通过这些方法，我们可以很容易地实现一个图片自动滚动的效果，并且还可以根据自己的需求来调整滚动速度和样式。