html纯css响应式轮播图,手把手教你用纯css3实现轮播图效果

一、前言

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