css实现图片的自动滑动

CSS实现图片的自动滑动，可以通过使用CSS3动画来达到效果，以下是具体实现过程。

/*HTML布局代码*/
<div class="slider">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
</div>

/*CSS代码*/
.slider {
    width: 640px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.slider img {
    width: 640px;
    height: 300px;
    position: absolute;
}

.slider img:nth-child(1) {
    animation: slide 10s infinite linear;
}

.slider img:nth-child(2) {
    animation: slide 10s infinite linear 5s;
}

.slider img:nth-child(3) {
    animation: slide 10s infinite linear 10s;
}

@keyframes slide {
    0% {
        left: 0;
    }
    100% {
        left: -640px;
    }
}

首先，使用HTML布局创建一个div容器和几个图片。

然后，在CSS代码中，将容器设置为固定宽度和高度，并将溢出设置为隐藏。将图片设置为绝对定位，并将第一张图片的动画设置为从0%到100%的循环动画。将第二张图片的动画设置为5秒后开始动画，将第三张图片的动画设置为在10秒后开始动画。最后，通过@keyframes属性定义动画效果，让图片随着时间左移。

这样，就可以实现图片的自动滑动效果了。