一、随便说几句

 

　　css3动画效果的强大不言而喻，自它出现一直热度不减，它与js动画的优劣也一直成为前端界争论的话题，不可置疑的是css3动画的出现在一定程度上降低了动画效果的实现难度，利于前端的学习，其精简的代码量把我们从烦人的js调试中解放出来，当然css的动画效果有其局限性，我们不能只用css3模拟出全部的就是动画，另外就是浏览器的兼容性问题。我们这次用css3实现一个轮播图效果，体验一下css3的强大。首先说明我们可次只实现了自动轮播，效果也是最常见的淡入淡出，并未实现点击轮换效果，至少在我目前水平来看，自动轮播与点击轮换两者纯css3只能选其一，如果可以同时实现两种效果的方法，请告诉我。

 

　　二、布局

 

　　html代码没有什么可说的，样式的话首先必定slider的大盒子必定是相对定位，另外我们采用在li标签中添加background-image，因为这样才有可能用纯的css实现响应式，另外背景图为了在响应式中看清全貌，必然使用background-size:100%，另外就是高度问题了，显然slider-container必需是和li的高度一致，因为响应式中必然这个高度不能固定死，所以使用height属性显然不行，padding属性可以解决这个问题，一是background-image可以显示在padding中，二是padding中以%为单位是以父元素宽度为基准的。

 

　　*{

 

　　margin:0;

 

　　padding:0;

 

　　}

 

　　ul,li{

 

　　list-style: none;

 

　　}

 

　　。floatfix {

 

　　*zoom: 1;

 

　　}

 

　　。floatfix:after {

 

　　content: "";

 

　　display: table;

 

　　clear: both;

 

　　}

 

　　。slider-contaner{

 

　　width:100%;

 

　　position:relative;

 

　　}

 

　　。slider,.slider-item{

 

　　padding-bottom:40%;

 

　　}

 

　　。slider-item{

 

　　width:100%;

 

　　position:absolute;

 

　　background-size:100%;

 

　　}

 

　　。slider-item1{

 

　　background-image:url（imgs/1.jpg）;

 

　　}

 

　　。slider-item2{

 

　　background-image:url（imgs/2.jpg）;

 

　　}

 

　　。slider-item3{

 

　　background-image:url（imgs/3.jpg）;

 

　　}

 

　　。slider-item4{

 

　　background-image:url（imgs/4.jpg）;

 

　　}

 

　　。slider-item5{

 

　　background-image:url（imgs/5.jpg）;

 

　　}

 

　　三、设计动画

 

　　淡入淡出效果肯定是使用opacity，首先整体来看所有图片的淡入淡出都是同一个动画，只是时间不一样而已，这肯定是利用animation-delay来控制，动画无限轮换肯定使用animation-iteration-count: infinite，我们这次5张图片，整个动画分为图片停留和淡入淡出两个效果，用下图表示，箭头表示淡入淡出过程。