一、随便说几句
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张图片，整个动画分为图片停留和淡入淡出两个效果，用下图表示，箭头表示淡入淡出过程。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
标签与元素