CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码（图片轮播效果一）

首先来看一下效果：（这些个电影画风好温柔...）

ody{
background: #222;
font-size: 16px;
color: #999;
font-weight: 400;
overflow: hidden;
}
ul{
list-style: none;
}
.name{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.name li span{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: image 24s linear infinite; /*infinite无限循环*/
-webkit-animation: image 24s linear infinite;
}
.name li span img{
width: 100%;
height: auto;100%
}
.name li div{
z-index: 10;
position: absolute;
bottom: 100px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: title 24s linear infinite;
-webkit-animation: title 24s linear infinite;;
}

View Code
【注】：

　　别忘了内外边距置0，*{margin: 0;padding: 0;}

　　由于每个图片的背景颜色块的值不同，所以我们选择title颜色的时，很难保证不会与背景融合，显示效果会差，我们有很多种方法解决这个问题，不多说，我这里给title一个随机位置效果，top和left值根据自己图片调整，调整时将之前设置的opacity透明度设为1下调整效果，再置为0，也可以解决这个问题：

/*title位置*/
.name li:nth-child(2) div{
top: 100px;
left: -500px;
}
.name li:nth-child(3) div{
top: 320px;
left: 400px;
}
.name li:nth-child(4) div{
top: 400px;
left: -100px;
}
.name li:nth-child(5) div{
top: 190px;
left: 200px;
}
.name li:nth-child(6) div{
top: 200px;
left: -100px;
}
.name li div h3{
font-size: 40px;
line-height: 100px;
}

效果显示：



3、设置每张图片和对应title的延时显示时间

/*延时显示*/
.name li:nth-child(1) span,
.name li:nth-child(1) div{
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.name li:nth-child(2) span,
.name li:nth-child(2) div{
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.name li:nth-child(3) span,
.name li:nth-child(3) div{
animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.name li:nth-child(4) span,
.name li:nth-child(4) div{
animation-delay: 12s;
-webkit-animation-delay: 12s;
}
.name li:nth-child(5) span,
.name li:nth-child(5) div{
animation-delay: 16s;
-webkit-animation-delay: 16s;
}
.name li:nth-child(6) span,
.name li:nth-child(6) div{
animation-delay: 20s;
-webkit-animation-delay: 20s;
}

4、给出关键帧动画

@keyframes image{
0%{opacity: 0;}
8%{opacity: 1;}
16%{opacity: 1;}
26%{opacity: 0;}
100%{opacity: 0;}
}
@-webkit-keyframes image{
0%{opacity: 0;}
8%{opacity: 1;}
16%{opacity: 1;}
26%{opacity: 0;}
100%{opacity: 0;}
}
@keyframes title{
0%{opacity: 0;}
8%{opacity: 1;}
16%{opacity: 1;}
26%{opacity: 0;}
100%{opacity: 0;}
}
@-webkit-keyframes title{
0%{opacity: 0;}
8%{opacity: 1;}
16%{opacity: 1;}
26%{opacity: 0;}
100%{opacity: 0;}
}

【注】：

　　之前定义动画名称image和title时给的animation时间为24s，所以平均分给6张图片是每张4秒，刚开始加载的时候可能比较慢，加载完就好了，如果觉得显示太快或者太慢，可以微调整。

自己犯过一个错，调了每个li的时间，但是总时间、image动画时间、title动画时间对不上，因为是循环播放，循环几轮之后就很明显看到，图片和title的显示不一致，切记所有时间要对的上！！