CSS3动画属性实现图片轮播

轮播图.gif

不会置入demo（T-T） 只能用ps模拟网页效果做一张GIF，渣图。网页动效要更平滑一些。

    

           
          
        
        

            
        

            

                
 ![](images/1.jpg)
                
 ![](images/2.jpg)
                
![](images/3.jpg)
            
        
        
        

             1
            2
            3
        
    

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
#slidershow {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 30px auto;
    overflow: hidden;
}
.slider {
    width: 300%;  /*--三张图片的宽度--*/
    height: 100%;
    margin-left: 0;
    -webkit-animation: slide1 6s ease-out infinite;
}
.slider li {
    float: left;
    width: 500px;
    height: 100%;
}

/*--创建三种动画策略--*/
@-webkit-keyframes slide1{
    0% {margin-left: 0;}
    23% {margin-left: 0;}
    33% {margin-left: -500px;}
    56% {margin-left: -500px;}
    66% {margin-left: -1000px;}
    90% {margin-left: -1000px;}
    100% {margin-left: 0;}
}
@-webkit-keyframes slide2{
    0% {margin-left: -500px;}
    23% {margin-left: -500px;}
    33% {margin-left: -1000px;}
    56% {margin-left: -1000px;}
    66% {margin-left: 0;}
    90% {margin-left: 0;}
    100% {margin-left: -500;}
}
@-webkit-keyframes slide3{
    0% {margin-left: -1000px;}
    23% {margin-left: -1000px;}
    33% {margin-left: 0;}
    56% {margin-left: 0;}
    66% {margin-left: -500px;}
    90% {margin-left: -500px;}
    100% {margin-left: -1000;}
}
/*--修改动画名称--*/
/*--点击页码图标链接到input，实现点击页码更换图片的效果--*/
#l01:checked ~ .wrap .slider {
    -webkit-animation-name: slide1; 
}
#l02:checked ~ .wrap .slider {
    -webkit-animation-name: slide2; 
}
#l03:checked ~ .wrap .slider {
    -webkit-animation-name: slide3; 
}
/*--短暂地取消动画名称，模拟重启动画--*/
#l01:active ~ .wrap .slider {
    -webkit-animation-name: none; 
    margin-left: 0;
}
#l02:active ~ .wrap .slider {
    -webkit-animation-name: none; 
    margin-left: -500px;
}
#l03:active ~ .wrap .slider {
    -webkit-animation-name: none; 
    margin-left: -1000px;
}

/*--页码样式--*/
.opts {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 0;
  text-align: center;
  padding: 5px 0;
}
.opts label {
  display: inline-block;
  width: 15px;
  height: 10px;
  margin: 0 3px;
  border-radius: 5px;
  cursor: pointer;
}
.focus-item{
width:100%;
height:100%;
background-color: #fff;
border-radius:inherit;
-webkit-animation: fade linear infinite;
}
/*--第二和第三个页码标签设置透明度0.2--*/
.focus-item2,.focus-item3 {
    opacity: .2;
}
/*--页码动画总时长和图片轮播时长一致--*/
.focus-item{
-webkit-animation-duration: 6s;
}
/*--页码动画从0-5%渐显，所以等待时长缩短零点几秒--*/
.focus-item1{
-webkit-animation-delay: -.2s;
}
.focus-item2{
-webkit-animation-delay: 1.6s;
}
.focus-item3{
-webkit-animation-delay: 3.6s;
}
@-webkit-keyframes fade{
0%{
opacity:.2;  /*--没轮到的页码设置成一点点透明--*/
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:.2;
z-index:0;
}
100%{
opacity:.2;
z-index:0;
}
}
/*--隐藏input按钮--*/
#l01,#l02,#l03 {
    display: none;
}

本来要弄的是白色的圆点跳转成蓝色的效果，结果我弄来弄去也弄不出来，只好弄一个降低透明度来区分两种效果，也还行。
[参考来源] http://codepen.io/lucifier/pen/DicEn