轮播图（纯CSS3）

轮播图

咋实现：

1. 把 n 张照片放在一个盒子里（这个盒子宽度要能装下所有照片，高度跟第二点的盒子一样高）.
2. 再把这个盒子放在一个你想要实现轮播图的定宽高的盒子里
3. 因为里面的盒子比外面的大，所以要使外面的盒子overflow：hidden
   这样让我们只能看到一张照片。

注意：

1. 动画效果分为两部分：切换和停留。

2. 动画的偏移值和图片大小相关。

3. 使用css3实现轮播特效的原理

首先必须保证展示容器大小与图片大小相同，再为图片添加float效果，然后确定插入的图片数量并且为每个图片设置动画阶段，其中每个阶段都是通过使用keyframes设置递增的margin-left值达到切换的效果。

HTML部分：

<div class="container">

    <div class="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
    
</div>

CSS部分：

        .container {
            width: 400px;
            height: 300px;
            overflow: hidden;
        }
        
        .container photo {
            width: 1200px;
            animation: switch 5s ease-out infinite;  
            /*切换 全过程5s， infinite轮播*/
        }
        
        .container photo img {
            float: left;
            width: 400px;
            height: 300px;
        }
        
        @keyframes switch {
            0%,
            25% {
                margin-left: 0;
            }
            35%,
            60% {
                margin-left: -400px;
            }
            70%,
            100% {
                margin-left: -800px;
            }
        }

CSS3 里面 animation下有个animation-fill-mode 设定动画完成后的状态：

1. 默认是none，
2. 设为infinite可以轮播，
3. 设为forwards 就可以在动画完成后定格在动画最后一帧