需求如下:三张轮播图轮播效果:实现每 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的情况下是一种办法。