CSS进阶之纯CSS幻灯片

CSS进阶之纯CSS幻灯片

   昨天写的博文有人点了赞，让我激动不已，晚饭赏自己一个鸡腿，。如果我的博文对您有帮助的话，就请您点个赞，您的鼓励是我前进的动力。如果发现文中有错误的地方，也烦请各位大牛指出。以下开始正文。

  首先用HTML搭建出基本的框架，如下：

<div id="container">
    <div class="slide">
    <!--将需要展示的图片放在一个ul里面-->
        <ul>
            <li class="first animation">
                <img src="img/014.jpg" alt="天堂和地狱">
                <div class="tooltips"><p>天堂和地狱</p></div>
            </li>
            <li class="second animation">
                <img src="img/015.jpg" alt="雪山">
                <div class="tooltips"><p>雪山</p></div>
            </li>
            <li class="third animation">
                <img src="img/016.jpg" alt="山谷">
                <div class="tooltips"><p>山谷</p></div>
            </li>
            <li class="fourth animation">
                <img src="img/017.jpg" alt="花朵">
                <div class="tooltips"><p>花朵</p></div>
            </li>
            <li class="fifth animation">
                <img src="img/018.jpg" alt="蓝天白云">
                <div class="tooltips"><p>蓝天白云</p></div>
            </li>
        </ul>
        <!--这个是一个进度条-->
        <div class="progressBar"></div>
    </div>

</div>

然后使用CSS给它加上基本的样式，让它看起来没有那么乱。

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 900px;
}
#container{
    width: 830px;
    margin: 50px auto;
}
.slide{
    border: 15px solid #ccc;
    border-radius: 5px;
    width: 800px;
    height: 450px;
    overflow: hidden;
    position: relative;

}
.slide ul{
    position: relative;
}
.slide ul li{
    list-style: none;
    position: absolute;
    left: -800px;
}
.slide ul li img{
    width: 800px;
    height: 450px;
}
.tooltips{
    background: rgba(0,0,0,0);
    width: 300px;
    height: 60px;
    position: relative;
    top: -80px;
    left: -300px;
    /*-webkit-transition: all 0.3s ease-in-out;*/
    /*-moz-transition: all 0.3s ease-in-out;*/
    /*-ms-transition: all 0.3s ease-in-out;*/
    /*-o-transition: all 0.3s ease-in-out;*/
    /*transition: all 0.3s ease-in-out;*/
}
.tooltips p{
    color:#fff;
    font-size:24px;
    font-weight:300;
    line-height:60px;
    padding:0 0 0 20px;
}
.slide .animation:hover .tooltips{
    left:0;
    background: rgba(0,0,0,0.7);
}
.progressBar{
    position: absolute;
    width: 800px;
    bottom: 0px;
    height: 5px;
    background: #000;
    z-index: 1;
    /*animation: progress 25s linear infinite;*/
    /*-moz-animation: progress 25s linear infinite;*/
    /*-webkit-animation: progress 25s linear infinite;*/
}

加完样式之后瞬间感觉清爽多了。接下来就是最关键的部分，使用CSS动画使图片动起来达到轮播的效果。（下图是本文实现的效果，图像有点不清晰，主要功能为五张图片依次轮播，鼠标划过停止动画以及出现提示文字和下方进度条）

在搜罗了一大堆前辈的代码之后，明白了轮播的基本原理。

  在一个播放周期内（文中用的是25s），让五张轮播图片依次出现在窗口内，通过更改图片的 opacity 和 z-index来实现。想要实现图片从左划到右边的动画，我们只需更改图片的 left属性即可。

我用一张时间表大概描述一下实现的原理。

  以第一张图片为例，其CSS动画如下：

/*定义动画*/
.slide li.first{
    animation: cycle01 25s linear infinite;
    -moz-animation: cycle01 25s linear infinite;
    -webkit-animation: cycle01 25s linear infinite;
}
/*如表上一样定义关键帧*/
@keyframes cycle01 {
    0%{left: 0;opacity: 1;z-index: 0;}
    10%{left:0;opacity: 1;z-index: 0;}
    20%{left: 800px;opacity: 0;z-index: 0;}
    21%{
        left: -800px;
        opacity:0;
        z-index: -1;
    }
    90%{
        left: -800px;
        opacity: 0;
        z-index: -1;
    }

    100%{
        left:0px;
        opacity: 1;
        z-index: 0;
    }
}

然后依次定义后面的四张。到此，CSS幻灯片的基本功能已经实现。接下来为其添加鼠标停留，动画停止和下方进度条的功能。

.slide:hover li,.slide:hover .progressBar{      /*鼠标经过的时候停止动画*/
    animation-play-state: paused;
}
/*进度条出现的原理跟上面图片出现的原理一样*/
.progressBar{
    position: absolute;
    width: 800px;
    bottom: 0px;
    height: 5px;
    background: #000;
    z-index: 1;
    animation: progress 25s linear infinite;
    -moz-animation: progress 25s linear infinite;
    -webkit-animation: progress 25s linear infinite;
}
@keyframes progress {                /*定义关键帧*/
    0%,20%,40%,60%,80%{
        width:0;
        opacity: 0;
    }
    5%,25%,45%,65%,85%{
        width: 50%;
        opacity: 0.7;
    }
    10%,30%,50%,70%,90%{
        width: 100%;
        opacity: 0.3;
    }
    11%,31%,51%,71%,91%{
        width: 0;
        opacity: 0;
    }

}

完整源代码和图片在下方的附件中。未处理兼容问题，所以请使用最新版本的浏览器。