[分享]css3怎么让图片轮流播放

CSS3早已成为网页设计中不可或缺的一部分，它的动画效果也越来越丰富。今天，我们学习如何用CSS3让图片轮流播放。 /定义容器/ .container{ width: 100; height: 250...

CSS3早已成为网页设计中不可或缺的一部分，它的动画效果也越来越丰富。今天，我们学习如何用CSS3让图片轮流播放。

 /*定义容器*/
    .container{
        width: 100%;
        height: 250px;
        position: relative;
        overflow: hidden;
    }

    /*定义图片*/
    .img{
        position: absolute;
        width: 100%;
        height: 100%;
    } 

首先，我们需要定义一个容器来包含图片，然后定义图片的样式。让图片设置为绝对定位，占据容器的全部宽高。

 /*定义动画*/
    @keyframes move{
        0%{
            left: 0;
        }
        25%{
            left: 0;
        }
        50%{
            left: -100%;
        }
        75%{
            left: -100%;
        }
        100%{
            left: 0;
        }
    }

    /*应用动画*/
    .img:nth-child(1){
        -webkit-animation: move 8s linear infinite;
        animation: move 8s linear infinite;
    }
    .img:nth-child(2){
        -webkit-animation: move 8s linear 2s infinite;
        animation: move 8s linear 2s infinite;
    }
    .img:nth-child(3){
        -webkit-animation: move 8s linear 4s infinite;
        animation: move 8s linear 4s infinite;
    } 

然后，我们需要定义一个名为move的关键帧动画。这个动画的关键是通过移动图片的left值来实现循环轮播的效果。在这个动画中，我们将0%和100%的left值都设置为0，中间的值则是从0%到50%的时候left值逐渐向左移动-100%的距离，从50%到100%的时候left值逐渐向右恢复到0。

最后，我们在每张图片上应用这个动画，通过不同的延迟值来使得三张图片的播放形成一个无限轮播的效果。

到这里，我们已经完成了CSS3让图片轮流播放的教程。通过这篇文章的学习，你已经可以自己轻松实现一个漂亮的轮播图了。