CSS多张图片滚动切换是一种常用的网页设计效果，可以通过CSS代码实现。在本文中，我们将介绍如何使用CSS制作多张图片的滚动切换效果。

HTML结构：
<div class="slider">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
</div>
CSS样式：
.slider {
width: 500px;
height: 300px;
overflow: hidden;
}
.slider img {
width: 500px;
height: 300px;
float: left;
}
.slider img:first-child {
margin-left: 0;
}
.slider img:last-child {
margin-right: 0;
}
@keyframes slide {
0% {
margin-left: 0;
}
100% {
margin-left: -1500px;
}
}
.slider img {
animation: slide 10s infinite linear;
}

首先，我们需要在HTML中创建一个含有多张图片的容器。这里我们使用了一个div标签，并为其添加了.slider的class名。在class名为.slider的div中，我们含有三张图片，分别为image1.jpg、image2.jpg和image3.jpg。

接下来，在CSS中，我们为.slider设置了一个固定的宽度和高度，并将其overflow属性设置为hidden，这样我们就获得了含有多张图片的容器，并且它们不会将外框撑大。我们还通过float属性将三张图片左浮动，并分别为第一张图片和最后一张图片添加了边距，这样我们就可以将它们的起始位置和结束位置精确地设置为div的两端。

最后，在CSS中，我们使用了关键帧动画技术，制作了一组名为slide的动画。在这个动画中，我们将第一张图片的margin-left属性设置为0，将最后一张图片的margin-right属性设置为0，使它们可以占据div容器的两端。在动画的最终关键帧中，我们将图片向左移动了1500px的距离，并将它的动画时间设置为10秒。最后，我们将这个动画应用于.slider img的元素中，并将它的重复次数设置为无限次。

通过以上的操作，我们就可以轻松地制作一个CSS多张图片滚动切换的效果。我们可以在实际项目中使用这个技术来设计我们的网页，并吸引用户的关注。