纯CSS3制作轮播图

来源：互联网发布：淘宝代运营诈骗案例编辑：程序博客网时间：2024/05/07 20:33

需求如下：三张轮播图轮播效果：实现每 5s 切换图片，图片循环播放；鼠标悬停某张图片，则暂停切换；切换效果使用入场图片 500ms 淡入的方式

依照需求我们选择用CSS3的animation动画进行实现；transition动画需要触发才能启动，

所以我们选择自动触发的animation属性；

HTML代码如下：

<div class="banner"><div id="pic3"><img src="css/img/banner3.jpg" alt=""></div><div id="pic2"><img src="css/img/banner2.jpg" alt=""></div><div id="pic1"><img src="css/img/banner1.jpg" alt=""></div></div>

CSS代码：

         .banner{position: relative;height: 460px;width: 100%;}#pic1{width: 100%;position: absolute;animation: a 16.5s linear 0s infinite normal both running;}@keyframes a{0%{opacity: 1;}30%{opacity: 1;}33.3%{opacity: 0;}96.6%{opacity: 0;}100%{opacity: 1;}}#pic2{width: 100%;position: absolute;animation: b 16.5s linear 0s infinite normal both running;}@keyframes b{0%{opacity: 1;}63.3%{opacity: 1;}66.6%{opacity: 0;}100%{opacity: 0;}}#pic3{width: 100%;position: absolute;animation: c 16.5s linear 0s infinite normal both running;}@keyframes c{0%{opacity: 1;}96.6%{opacity: 1;}100%{opacity: 0;}}

思路就是：将三个图片进行绝对定位重叠之后，将三个图片的动画放在一条时间轴上，分别在不同时间点控制透明度，在样式代码中的细节

写的很好理解了，在不用DOM的情况下是一种办法。

0 0