纯CSS3实现banner图片自动轮播效果方式总结

自动轮播：

实现切换图片，图片循环播放；鼠标悬停某张图片， 则暂停切换。

 

方法1、opacity控制透明度实现轮播效果

依照需求我们选择用CSS3的animation动画进行实现；transition动画需要触发才能启动，

所以我们选择自动触发的animation属性；

思路就是：将三个图片进行绝对定位重叠之后，将三个图片的动画放在一条时间轴上，分别在不同时间点控制透明度，在样式代码中的细节

写的很好理解了，在不用DOM的情况下是一种办法。

html:

        <div class="banner">
            <img class="banner__pics banner__pics1" src="img/hedy/banner1.png"/>
            <img class="banner__pics banner__pics2" src="img/hedy/banner2.png"/>
            <img class="banner__pics banner__pics3" src="img/hedy/banner3.png"/>
        </div>

css:

.banner{
    height: 378px;
    width: 100%;
    position: relative;
    im