纯css : 实现图片左右切换效果（animation 属性、@keyframes 规则）

实现效果：
几张图片依次轮流切换（不会放动图。。。。）

思路：

1. 先设定一个播放的盒子A，要求盒子的宽和高与图片的大小一致；
2. 在设定一个容纳几张图片的盒子B,要求盒子的宽与所有图片的总宽一致，高度与图片一致；
3. 将图片横向排放在盒子B中，用float属性做定位；
4. 利用 animation 属性、@keyframes 规则 设置动画效果，实现切换的目的。

具体代码：

<div id="frame">
     <div class="photos">
          <img src="../images/ad1.png" height="342" width="759"/>
          <img src="../images/ad2.png" height="342" width="759"/>
          <img src="../images/ad3.png" height="342" width="759"/>
          <img src="../images/ad4.png" height="342" width="759"/>
      </div>
</div>

#frame                                     //盒子A
{
    width:769px;
    height:343px;
    margin-left: 30px;
    overflow: hidden;
    position: relative;
   /* border:1px solid darkorchid;*/
}
#frame .photos                           //盒子B
{
    width:3076px;
    height:343px;
    animation: move 10s ease infinite; 
        //animation属性要与keyframes规则进行绑定
       //注意 动画效果，可根据具体情况调整
}
#frame .photos img
{
    width:769px;
    height:343px;
    float:left;                          //横向排列在盒子B里
}
@keyframes move
{
    0%, 15% {margin-left: 0;}
    25%, 40% {margin-left: -769px;}
    55%, 70% {margin-left: -1538px;}
    85%, 100% {margin-left: -2307px;}     //图片的张数不同，设置也不一样
}

啦啦啦，这样就实现了哦！！

---

接下来，具体介绍一下animation 属性、@keyframes 规则：

animation 属性:

具体属性介绍，可点击此处了解

@keyframes 规则:

1. from to 规则====%0 %100
   即：从动画开始播放到动画结束。

2. 使用百分比规则（百分比的设定与动画播放时间有关）；