纯css满屏图像幻灯片制作

最新推荐文章于 2021-11-25 21:43:50 发布

辛丙亮

最新推荐文章于 2021-11-25 21:43:50 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css3 前端动画幻灯片

本文链接：https://blog.youkuaiyun.com/qq_22533095/article/details/50496100

前端专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何使用纯CSS3技术创建一个全屏图像幻灯片，包括HTML结构、CSS样式设置及动画实现。通过简单的代码示例，作者展示了如何制作动态的、视觉效果丰富的幻灯片展示，适合网页设计师和前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

天天写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作者把所有内容都完善了，建议大家还是去试一试最终效果。