您的位置：首页 > Web前端 > CSS

纯css满屏图像幻灯片制作

2016-01-11 11:56 531 查看

天天写Linux有点烦，换个口味。今天说一下使用css制作满屏幻灯片,我是看的来自淘宝工程师在w3cplus写的文章：纯CSS3制作满屏图像幻灯片。作者写的很好，也是我经常逛的博客，推荐给大家，可能是作者可能觉得不言自明，很多细节问题作者并没有说明
，我在这里仔细说明一下。

    相关文件可以在w3cplus上找到。

    HTML结构超级简单：

<body>
<ul class="cb-slideshow">
<li>images1</li>
<li>images2</li>
<li>images3</li>
<li>images4</li>
<li>images5</li>
<li>images6</li>
</ul>
<div id="wrapper">

</div>
</body>
    首先将整个显示区域定位，可能有问题的部分都在代码中做了注释，overflow-y和overflow-x这里的作用是用来在运动过程中会有内容超出显示区域时的动作。

*{
    margin: 0;
    padding: 0;
}

body{
    background: #000;
    font-size: 15px;
    font-weight: 400;
    font-family: Constantia,palatino,"Palatino Linotype","Palatino LT STD",Georgia;
    color: #aa3e03;
    overflow-y: scroll; /* 上下内容超出的时候使其滚动 */
    overflow-x: hidden; /* 左右内容超出的时候使其隐藏 */
}

/* 这里作用是使图片总显示在贴近浏览器的左上部 */
.cb-slideshow,
.cb-slideshow:after{
    /* 相对浏览器的绝对布局 */
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
<span style="font-family:Arial;">}</span>
    定义运动的动画,相信知道css3动画的人都会看懂这部分意思，分别指定了显示区块的透明度，相对顶端的位置，以及动作函数。这里会需要考虑两个问题。1.运动动画设置的相对位置，是相对初始位置还是相对上一位置而言的？这会影响到你设置运动参数时的值。2.为什么当设置2000px,并不会存在显示的块在下方某个位置？后面我会说明这个问题
/* 自定义动画效果 */
@keyframes imageAnimation {
0%{
opacity: 0;
transform: translateY(2000px);
animation-timing-function: ease-in;
}
8%{
opacity: 1;
transform: translateY(-30px);
animation-timing-function: ease-out;
}
17%{
opacity: 1;
}
25%{
opacity: 0;
transform: translateY(10px);
}

100%{
opacity: 0;
transform: translateY(0);
}
}    看一下动画的调用。我觉得作者做的最巧妙的就是在动画的队列上，要是我会一个个写动画，但是作者却用一个动画。作者对所有li元素执行相同的动画，然后通过，每个部分的延时来达到动画的队列，次序执行。运行时你会发现，多了一种朦胧的感觉原因在于:after这里设置的背景图像是中间有点的半透明图像，所以会产生这样的效果。
<span style="font-family:Arial;font-size:14px;">.cb-slideshow:after{
    content: "";
    background: url("../img/pattern.png") repeat left top;
}

.cb-slideshow li {
    /* 父级元素已经设置了相对浏览器的绝对定位，这里设置绝对定位就会相对于浏览器绝对定位 */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: transparent;

    /* 最开始的时候是透明的 */
    opacity: 0;
    z-index: 0;

    /* 设置背景图像被放大到最大程度 */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;

    background-position: center;
    background-repeat: no-repeat;

    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

/* 设置不同的显示背景 */
.cb-slideshow li:nth-child(1){
    background-image: url(../img/1.jpg);
}
.cb-slideshow li:nth-child(2){
    background-image: url(../img/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3){
    background-image: url(../img/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4){
    background-image: url(../img/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5){
    background-image: url(../img/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6){
    background-image: url(../img/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}

/* 自定义动画效果 */
@keyframes imageAnimation {
    0%{
        opacity: 0;
        transform: translateY(2000px);
        animation-timing-function: ease-in;
    }
    8%{
        opacity: 1;
        transform: translateY(-30px);
        animation-timing-function: ease-out;
    }
    17%{
        opacity: 1;
    }
    25%{
        opacity: 0;
        transform: translateY(10px);
    }

    100%{
        opacity: 0;
        transform: translateY(0);
    }
}</span>    代码都出来了，现在谈一谈上面的两个问题。眼见为实，编程这个东西我们看到现象就能知道过程。所以我设置了一个边框，在注释中也指出来了。你执行观察白色边框的运动轨迹就能知道是相对最初始位置而言的。第二个问题，换句话说为什么竖直滚动条为什么没有显示，原因跟body的特性有关，body的高度跟内部内容相关，但是,最开始和结束的时候内容还来不急显示就option:0了,相当于隐藏，也就不显示了。
    w3cplus作者把所有内容都完善了，建议大家还是去试一试最终效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 前端动画幻灯片

相关文章推荐

新的分享

章节导航