纯CSS3打造焦点轮播图(无js)

今天给大家带来一个不借助js,只用纯css3实现的焦点轮播图教程,包括轮播间隔时间我们也可以自定义。这里我们用到的是css3的@keyframe规则和animation属性。注意,此规则与属性仅IE10以及Chrome、Safari、Opera、Firefox支持。具体用法可以参照这篇文章:http://www.w3cplus.com/content/css3-animation或者网络相关资料。

首先我们先构建主框架,很简单,就不详述了。

<div id = "container">  
  <ul id="slide">
    <li id="first"><a href=""><img src="1.jpg" alt="图片1"></a></li>
    <li id="second"><a href=""><img src="2.jpg" alt="图片2"></a></li>
    <li id="third"><a href=""><img src="3.jpg" alt="图片3"></a></li>
    <li id="fourth"><a href=""><img src="4.jpg" alt="图片4"></a></li>
  </ul>
</div>


我们通过绝对定位,让四张图片重叠在一起。

 
* { margin: 0; padding: 0;}
body { margin: 0 auto;}
#container { 
	width: 500px;
	height: 375px;
	box-shadow: 1px 1px 10px #aaa;
	padding: 5px;
	margin: 20px auto;
	position: relative;
}
 
ul { 
	width: 500px;
	height: 375px;
	position: relative;
	overflow: hidden;
}
 
li { 
	list-style: none;
	position: absolute;
	top: 0px;
	left: 0;
 
}

我们要实现的效果是第一张图片先显示着,隔一段时间第一张图片淡出,而第二张图淡入,其他图片也一样依次淡出淡入。前面的html代码里我们已经为每一个图片列表项设置了id,要使用css3的动画属性,我们就要先进行动画绑定。这里使用animation属性。在绑定之前先要定义动画规则@keyframe,可以称其为关键帧,如果有点Flash基础的人应该会比较容易上手,就好比设置一头一尾关键帧,然后中间设置补间动画一样。限于篇幅,这里不详细介绍具体用法了。这里我们使用百分比来设置图像的透明度。比如第一张图片,我们希望在一开始就显示,然后在若干秒后淡出直到完全透明不显示,代码:

 
keyframes pic_1 { 
	0% { opacity: 1;}
	15% { opacity: 1;}
	25% { opacity: 0;}
	90% { opacity: 0;}
	100% { opacity: 1;}

假设整个动画流程为一个单位时间,从开始到15%的时间,我们让第一张图显示,到百分之25%的时间单位点上,我们使其慢慢透明到看不见,然后直到在90%-100%的时间段里再让其淡入显示。这个时间百分比一定要计算好,因为要照顾其他几张图片依次淡出淡入。要使用这一动画规则,我们还需要将其绑定到具体图像元素上。比如绑定到第一张图像上:

#first { 
	animation: pic_1 24s infinite;
}

pic_1为关键帧名称,24秒为整个流程时间,infinite代表无限循环。

其他几个也要分别设置绑定。另外我们还需要设置在鼠标悬停在图片上时暂停轮播,代码如下:

#slide: hover li { 
	animation-play-state: paused;
}

项目代码比较简单,我就直接放代码了。点击Result查看效果。

也可以查看我的网站Demo