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;
}
}
完整源代码和图片在下方的附件中。未处理兼容问题，所以请使用最新版本的浏览器。
时间： 2024-11-05 23:19:44