【banner】介绍一个纯CSS3做的轮播图

日常搜寻组件中，发现有人做出一款css3轮播图，感觉挺棒，就转载过来分享下。

HTML部分：

<div class="baner-box">
<ul class="banner">
<li style="background-color:#f90;"></li>
<li style="background-color:#f00;"></li>
<li style="background-color:#9f0;"></li>
<li style="background-color:#333;"></li>
</ul> 
</div>

CSS部分：

ul li{list-style: none; }
 .baner-box{position: relative;width: 400px;height: 200px;overflow: hidden;}
 .banner{width:1600px;position: absolute;left:0;animation-name: bannerMove;animation-duration: 8s;animation-iteration-count: infinite;}
 @keyframes bannerMove {
 0%,30%{left: 0;}
 35%,65%{left: -400px; }
 70%,99%{left: -800px; }
 100%{left: -1200px; }
 }
 .banner li{float: left; width: 400px;height: 200px;}

希望大家在项目中可以用到这款css3轮播图。