纯 CSS3 实现可循环的幻灯片
感谢 CSS3 给我们带来了这么多的惊喜，这才让我可以完成今天的这个小作品，不使用任何 JavaScript 代码，实现可循环的幻灯片，它还带渐变等动画。不过这似乎是我对 CSS3 的一种乱用吧，因为比起使用 JavaScript 的各种库来说，使用 CSS3 来实现麻烦得多，而且它还有严重的浏览器兼容性问题，尤其是在神一样的国度，闲话少扯，下面入正题。
HTML 结构
整个 Slider 的HTML结构十分简单，就和我们平常写的 HTML 没有什么两样，下面是整个 Slider 的 HTML 代码：
<div>
<div>
<ul>
<li>
<a href="#"><img src="image-1.jpg" alt="First Image" /></a>
<div>
<h3>第一个幻灯片</h3>
<p>这里一个幻灯片的介绍文字，您以前应该看到过很多这样的东西了吧？</p>
</div>
</li>
<li>
<a href="#"><img src="image-2.jpg" alt="Second Image" /></a>
<div>
<h3>第二个幻灯片</h3>
<p>这里一个幻灯片的介绍文字，您以前应该看到过很多这样的东西了吧？</p>
</div>
</li>
<li>
<a href="#"><img src="image-3.jpg" alt="Third Image" /></a>
<div>
<h3>第三个幻灯片</h3>
<p>这里一个幻灯片的介绍文字，您以前应该看到过很多这样的东西了吧？</p>
</div>
</li>
<li>
<a href="#"><img src="image-4.jpg" alt="Fourth Image" /></a>
<div>
<h3>第四个幻灯片</h3>
<p>这里一个幻灯片的介绍文字，您以前应该看到过很多这样的东西了吧？</p>
</div>
</li>
<li>
<a href="#"><img src="image-5.jpg" alt="Fifth Image" /></a>
<div>
<h3>第五个幻灯片</h3>
<p>这里一个幻灯片的介绍文字，您以前应该看到过很多这样的东西了吧？</p>
</div>
</li>
</ul>
</div><!-- /.slides -->
<div></div><!-- /.progress-bar -->
</div><!-- /.slider -->- div class=“slider”
这是我们的幻灯片的主容器，整个幻灯片的所有内容都被放在该容器里面，我们将使用它*暂停动画的运行*。 - div class=“slides”
我们所有的幻灯片都放在该容器中，在该容器中，存在一个无序列表，该列表的每一项目就是一张幻灯片。 - li
一张幻灯片，我制作的这个幻灯片中包括一张图片，一个标题以及一段简短的介绍文字，这些都是我们最常用的格式。 - div class=“tooltip”
这里面是幻灯片的标题以及介绍文字，你还可以根据需要添加一些你自己的的内容，比如让标题成为一个链接指向某一个网页。 - div class=“progress-bar”
进度条，展示幻灯片动画的进度。
现在我们可以开始编辑 CSS 文件了。
CSS 样式
我将所有的 CSS 样式都保存在名为 css3.css 的文件中。
.slider
我们使用这个类来创建幻灯片的整体结构：
.slider {
font-size: 10px;
background-color: #000;
border: .5em solid #ddd;
box-shadow: .1em .1em .5em rgba(0.0.0.0.7);
height: 32em;
width: 68em;
margin: 5em auto 0;
overflow: visible;
position: relative;
}.slides
从我们以前使用 JavaScript 实现的幻灯片的经验中，应该知道，我们总是需要有一个容器，它能完整的显示一个幻灯片，但同时它还需要可以隐藏掉没有激活的幻灯片，在我们的这个小项目中，.slides就是完成这个任务的。
.slides {
overflow: hidden;
height: 32em;
}.slides ul & .slides li
最后我们还需要去除掉 ul 与 li 的默认样式，并且把所有的幻灯片都安排到一个初始位置，这个位置应该方便我们动画的完成，还不能让未激活的幻灯片显示出来。
.slides ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.slides li {
width: 68em;
height: 32em;
position: absolute;
top: -32.5em;
}CSS3 帧动画
在继续完成 CSS 代码之前，我们需要有一些关于当前这个小幻灯片的一些约定，这些约定也是我们需要使用 CSS3 去实现的，在本未例中，共有五张幻灯片，我准备按5秒一张的速度执行该幻灯片，那么总计将需要25秒完成整个幻灯片，但是我们需要知道 *1秒的时间能执行多少帧*。
所以，让我们做一个小小的算术题：
- 我们总个幻灯片使用的总幻灯片数目：*5*；
- 每一张幻灯片动画执行的时间：*5秒*；
- 整个幻灯片动画需要执行的时间：5张 x 5秒 = *25秒*；
- 每一秒动画执行的帖数为：155 / 25 = *4帧*。
现在我们可以来继续完成 CSS 了，我们将给所有幻灯片都设置为无限循环，因为每一张幻灯片都是在完成它自己的动画，是互不干扰的。
.slides li:first-child {
animation: first 25s linear infinite;
}
.slides li:nth-child(2) {
animation: second 25s linear infinite;
}
.slides li:nth-child(3) {
animation: third 25s linear infinite;
}
.slides li:nth-child(4) {
animation: fourth 25s linear infinite;
}
.slides li:nth-child(5) {
animation: fifth 25s linear infinite;
}现在我们已经为每一个幻灯片设定了一个专属于它的动画（CSS animation 的第一个参数即它所绑定的动画的名称），我们现在只需要再定义每一个名称所指定的动画的实现流程即可（注意：运行必须要先定义才能使用，所以我们应该把动画的定义放在 CSS 文件的最前面）。
/* ANIMATION */
@keyframes first {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:32.5em; opacity:0; z-index:0; }
21% { top:-32.5em; opacity:0; z-index:-1; }
92% { top:-32.5em; opacity:0; z-index:0; }
96% { top:-32.5em; opacity:0; }
100%{ top:0px; opacity:1; }
}
@keyframes second {
0% { top:-32.5em; opacity:0; }
16% { top:-32.5em; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:32.5em; opacity:0; z-index:0; }
41% { top:-32.5em; opacity:0; z-index:-1; }
100%{ top:-32.5em; opacity:0; z-index:-1; }
}
@keyframes third {
0% { top:-32.5em; opacity:0; }
36% { top:-32.5em; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:32.5em; opacity:0; z-index:0; }
61% { top:-32.5em; opacity:0; z-index:-1; }
100%{ top:-32.5em; opacity:0; z-index:-1; }
}
@keyframes fourth {
0% { top:-32.5em; opacity:0; }
56% { top:-32.5em; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:32.5em; opacity:0; z-index:0; }
81% { top:-32.5em; opacity:0; z-index:-1; }
100%{ top:-32.5em; opacity:0; z-index:-1; }
}
@keyframes fifth {
0% { top:-32.5em; opacity:0; }
76% { top:-32.5em; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:32.5em; opacity:0; z-index:0; }
}到现在为止，我们的幻灯片已经可以正常的工作了，那么接下面，把 .tooltip 和 .progress-bar 的问题也解决掉那就完美了。
进度条
进度条我准备放在幻灯片的最下面，它是一个从左至右慢慢被颜色填充的长方形容器，它的 CSS 样式如下：
@keyframes progressbar {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
[...]
.progress-bar {
position: absolute;
bottom: 0;
width: 100%;
height: .5em;
background-color: #000;
animation: progressbar 25s ease-out infinite;
}标题与介绍
幻灯片本身已经完成啦，现在我们再来给他的标题与介绍做一些细节上面的处理。
.tooltip {
position: absolute;
width: 100%;
left: -100%;
padding: .5em 0;
bottom: 1em;
color: #f0f0f0;
background-color: rgba(0,0,0,0.7);
transition: all 0.3s ease-in-out;
}
.slider:hover .tooltip {
left: 0;
}
.tooltip h3 {
padding-left: .5em;
font-size: 1.6em;
margin: 0;
}
.tooltip p {
padding-left: .8em;
margin: 0;
}到现在为止我们的幻灯片已经完成做完了，最终的效果你可以下载本示例的打包文件在自己的电脑中测试，下载链接在本文的下方。
常见问题
- 我下载了打包文件可以运行，但是自己按照本文的代码写的去无法运行，这是怎么回事儿？
这个问题很好理解啊，transition, animation 这些东西到现在都还没见着哪个浏览器直接支持，而是使用了自家的指令，比如对于 Chrome浏览器我们应该使用：*-webkit-animation*，但是对于火狐我们却又得使用 *-moz-animation*，但是在本文的文章中，我并没有把这每一个都写出来，而是直接写了 *animation*，所以，如果你接照我的文章来做的话，你需要自己加各种浏览器的不同版本的指令才行，IE的话直接跳过吧……
评论已关闭