用css实现幻灯片播放是最基础的，闲下来没事就试着写了一下，如果有不够完善或者方法不好的地方还请指点。下面我就用两种方法实现css花灯片效果。
方法1：定位。通过position属性改变left值
html代码：
<section id=box>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul>
</section>
css代码：
<style>
* {
margin: 0;
padding: 0;
font-family: 微软雅黑;
list-style: none;
}
#box{
width:400px;
height:200px;
border: 1px solid #000;
margin: 50px auto;
position:relative;
overflow: hidden;
}
ul{
width: 2000px;
position: absolute;
top:0;
left:0;
animation: dh 10s infinite ease;
}
ul li{
width:400px;
height:200px;
float: left;
}
ul li:nth-child(1){
background:#4b86db;
}
ul li:nth-child(2){
background:#ff9999;
}
ul li:nth-child(3){
background:olivedrab;
}
ul li:nth-child(4){
background:skyblue;
}
ul li:nth-child(5){
background:#4b86db;
}
@keyframes dh {
0%{
left:0px;
}
25%{
left:-400px;
}
50%{
left:-800px;
}
75%{
left:-1200px;
}
100%{
left:-1600px;
}
}
</style>
方法2:2D转换。通过transfrom属性
html代码：
<section id=box>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul>
</section>
css代码：
<style>
* {
margin: 0;
padding: 0;
font-family: 微软雅黑;
list-style: none;
}
#box{
width:400px;
height:200px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
}
ul{
width: 2000px;
animation: dh 10s infinite ease;
}
ul li{
width:400px;
height:200px;
float: left;
}
ul li:nth-child(1){
background:#4b86db;
}
ul li:nth-child(2){
background:#ff9999;
}
ul li:nth-child(3){
background:olivedrab;
}
ul li:nth-child(4){
background:skyblue;
}
ul li:nth-child(5){
background:#4b86db;
}
@keyframes dh {
0%{transform: translateX(0)}
25%{transform: translateX(-400px)}
50%{transform: translateX(-800px)}
75%{transform: translateX(-1200px)}
100%{transform: translateX(-1600px)}
}
</style>
以上两种方法是我想到最简单的方法，如果有更好的方法还请朋友们留言指教。
