CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码（图片轮播效果一）
首先来看一下效果：（这些个电影画风好温柔...）
0、先讲一个CSS3的动画用法
animation基本用法是：animation: name keeping-time animate-function delay times iteration final;
- 第一个参数：name (animation-name)：
动画的名字，CSS3采用“关键帧 keyframes”来定义动画,如下第4个步骤展示；
1 @keyframes image{ 2 0%{opacity: 0;} 3 100%{opacity:1;} 4 } 5 /*或者*/ 6 @keyframes image{ 7 from{opacity: 0;} 8 to{opacity: 1;} 9 }
- 第二个参数 keeping-time (animation-duration)：
动画的持续时间，单位s或者ms（一定要带时间单位）；
- 第三个参数 animate-function (animation-timing-function)：
（动画方式）的贝赛尔曲线，可取值有：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)；
- 第四个参数 delay (animation-delay)：
动画延迟执行的时间，单位为s或者ms{即使延迟时间为0，也必须加上时间单位，如果写成直接写成0，在Chrome和Safari(webkit)下是没问题的，但是在FF(gecko)下无效}；
- 第五个参数 times (animation-iteration-count)：
动画循环执行的次数，使用infinite值为无限循环；
- 第六个参数 iteration (animation-direction)：
如果动画循环，循环的方式有：alternate(偶数次向前播放，奇数次向后播放)和normal(每次都向前播放)；
- 第七个参数 final (animation-fill-mode)：
动画达到100%时的状态，取值有：backward（回到初始状态）、forwards（停在最终状态）、none、both。
以上7个参数不定要全部都有，不需要的效果可以不写，如我这里只用到4个参数：
1 animation: image 24s linear infinite;
1、先在<body>里把图片贴进来，每个li下面再给一个标题
1 <ul class="name"> 2 <li> 3 <span><img src="img/img01.jpg" alt="" /></span> 4 <div><h3>哈尔的移动城堡</h3></div> 5 </li> 6 <li> 7 <span><img src="img/img02.jpg" alt="" /></span> 8 <div><h3>火隐忍者</h3></div> 9 </li> 10 <li> 11 <span><img src="img/img03.jpg" alt="" /></span> 12 <div><h3>海贼王</h3></div> 13 </li> 14 <li> 15 <span><img src="img/img04.jpg" alt="" /></span> 16 <div><h3>红猪</h3></div> 17 </li> 18 <li> 19 <span><img src="img/img05.jpg" alt="" /></span> 20 <div><h3>起风了</h3></div> 21 </li> 22 <li> 23 <span><img src="img/img06.jpg" alt="" /></span> 24 <div><h3>龙猫</h3></div> 25 </li> 26 </ul>
2、给样式，自己给一个宽度、高度(我这里直接满屏显示，^_^懒...),给图片一个动画名称image；
给标题一个动画名称title。
1 ody{ 2 background: #222; 3 font-size: 16px; 4 color: #999; 5 font-weight: 400; 6 overflow: hidden; 7 } 8 ul{ 9 list-style: none; 10 } 11 .name{ 12 position: fixed; 13 100%; 14 height: 100%; 15 top: 0; 16 left: 0; 17 } 18 .name li span{ 19 100%; 20 height: 100%; 21 position: absolute; 22 top: 0; 23 left: 0; 24 opacity: 0; 25 animation: image 24s linear infinite; /*infinite无限循环*/ 26 -webkit-animation: image 24s linear infinite; 27 } 28 .name li span img{ 29 100%; 30 height: auto;100% 31 } 32 .name li div{ 33 z-index: 10; 34 position: absolute; 35 bottom: 100px; 36 100%; 37 text-align: center; 38 opacity: 0; 39 color: #fff; 40 animation: title 24s linear infinite; 41 -webkit-animation: title 24s linear infinite;; 42 }