CSS3是前端开发中非常重要的一项技术，它可以帮助我们实现很多炫酷的效果，其中一个非常实用的功能就是让图片自动滚动。这项功能可以帮助我们在网站页面中展示更多的图片，增加用户的浏览体验，现在让我们来学习一下如何实现图片自动滚动吧。

html代码：
<div class="image-container">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
<img src="image5.jpg" alt="image5">
</div>
css代码：
.image-container {
width: 500px;
overflow: hidden;
}
img {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
}

首先我们需要创建一个包含图片的容器，这里我们使用了div的class来命名。在容器的css中，我们设置了宽度为500px，overflow为hidden属性来隐藏容器中超出部分的图片。值得注意的是，图片的宽度和高度需要设置为固定值，否则会导致图片布局错乱。同时，我们为每张图片添加了float属性，使其能够在一行中排列，并设置了margin-right属性为10px来让图片之间有一定的间隙。

css代码：
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-500px); }
}
img {
animation: scroll 10s linear infinite;
}

在以上代码中，我们使用了CSS3的动画属性和关键帧定义，使得图片在容器中自动滚动。我们首先定义了一个名为scroll的关键帧，动画从0%到100%时图片的位置将向左移动500px，这样就实现了图片滚动的效果。其中,10s是动画的持续时间，linear表示动画速度为匀速，infinite则表示动画循环无限次。

到这里，图片自动滚动的效果就已经实现了，我们可以根据需要修改对应的CSS属性，使得滚动效果更加炫酷。