纯CSS3制作轮播图

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