使用css实现轮播效果
使用css制作简单的轮播效果，参考了以下代码：css实现的轮播和点击切换(无js版)
之前写过一个点击切换的教程，这里附上链接：使用css实现点击切换效果
与点击切换一样，首先先制作一个容器，用来容纳所显示的内容：
HTML代码：
<html>
<head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="contain">
<ul>
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
</div>
</div>
</body>
</html>CSS代码：
.contain{
position: relative;
margin:auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
overflow: hidden;
}
.contain ul{
margin:10px 0;
padding:0;
width: 1800px;
}
.contain li{
float: left;
width: 600px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 36px;
}
.one{
background: #9fa8ef;
}
.two{
background: #ef9fb1;
}
.three{
background: #9fefc3;
}由于我们将ul设置成了一个宽度为父容器300%长条，此时，就可以通过修改margin-left属性值将其左移，以此实现切换效果，接下来，创建一个动画：
CSS代码：
@keyframes marginLeft{
0%{margin-left: 0;}
28.5%{margin-left: 0;}
33.3%{margin-left: -600px;}
62%{margin-left: -600px;}
66.7%{margin-left: -1200px;}
95.2%{margin-left: -1200px;}
100%{margin-left: 0;}
}令ul标签使用这个动画，这里将动画的长度设置为10.5s，无限次播放
HTML代码：
<html>
<head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="contain">
<ul class="slide-auto">
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
</div>
</div>
</body>
</html>.contain .slide-auto{
animation:marginLeft 10.5s infinite;
}CSS代码：
.contain ul{transition:all 0.5s;}