前端时间一直在琢磨CSS3动画轮播，但是怎么做都感觉不是很好，以前是我在一个网站看到的教程代码，琢磨好几天，今天终于理解了，所以整理了一下发出来给大家分享一下！
这个轮播只适用于左右或者上下轮播：
<style type="text/css">
/*初始值*/
* {margin: 0;padding: 0;}
ul {list-style: none;}
/*按钮关联左向轮播*/
/*主盒子：相对定位，显示宽高，溢出隐藏*/
#box1 {position: relative;width: 600px;height: 400px;margin: 30px auto;border: 1px solid #9cc5ef;
overflow: hidden;}
/*子盒子:总宽度,引入动画*/
#box1_1 {
width: 300%;height: 100%;font: 100px/400px Microsoft Yahei;
text-align: center;color: #fff;margin-left: 0;
-webkit-animation: slide1 3s ease-out infinite;}
/*li标签浮动,不然会以列往下排序*/
#box1_1 li {float: left;width: 600px;height: 100%;}
/*创建三种动画策略*/
/*动画一运用于默认动画和按钮一*/
@-webkit-keyframes slide1 {
0% {margin-left: 0;}
23% {margin-left: 0;}
33% {margin-left: -600px;}
56% {margin-left: -600px;}
66% {margin-left: -1200px;}
90% {margin-left: -1200px;}
100% {margin-left: 0;}
}
/*动画二运用于按钮二*/
@-webkit-keyframes slide2 {
0% {margin-left: -600px;}
23% {margin-left: -600px;}
33% {margin-left: -1200px;}
56% {margin-left: -1200px;}
66% {margin-left: 0;}
90% {margin-left: 0;}
100% {margin-left: -600px;}
}
/*动画三运用于按钮三*/
@-webkit-keyframes slide3 {
0% {margin-left: -1200px;}
23% {margin-left: -1200px;}
33% {margin-left: 0;}
56% {margin-left: 0;}
66% {margin-left: -600px;}
90% {margin-left: -600px;}
100% {margin-left: -1200px;}
}
/*修改动画名称*/
#l01:checked~#box1 #box1_1 {-webkit-animation-name: slide1;}
#l02:checked~#box1 #box1_1 {-webkit-animation-name: slide2;}
#l03:checked~#box1 #box1_1 {-webkit-animation-name: slide3;}
/*短暂地取消动画名称，模拟重启动画*/
#l01:hover~#box1 #box1_1 {-webkit-animation-name: none; margin-left: 0;}
#l02:hover~#box1 #box1_1 {-webkit-animation-name: none;margin-left: -600px;}
#l03:hover~#box1 #box1_1 {-webkit-animation-name: none;margin-left: -1200px;}
#opts {width: 600px;height: 40px;margin: auto;color: #fff;
text-align: center;font: 20px/40px Microsoft Yahei;}
#opts label {float: left;width: 100px;height: 40px;margin-right: 4px;
background: #01254a;cursor: pointer;}
#opts label:hover {background: #405871;}
/* 隐藏Input按钮*/
/*#l01,
#l02,
#l03 {display: none;}*/
</style>
<body>
<!--按钮关联：左轮播-->
<input type="radio" checked name="slider" id="l01">
<input type="radio" name="slider" id="l02">
<input type="radio" name="slider" id="l03">
<div id="box1">
<ul id="box1_1">
<li></li>
<li></li>
<li></li>
</ul> bn
</div>
<div id="opts">
<label for="l01">1</label>
<label for="l02">2</label>
<label for="l03">3</label>
</div>
</body>