通过css实现幻灯片效果

html:

• 
• 
• 
• 
• 

css:
.box {
border: 0px solid white;
width: 1520px;
height: 480px;
margin: 0 auto;
position: absolute;
overflow: hidden;
}
.box ul{
width: 7600px;
height: 520px;
animation: slide 30s 2s alternate infinite;/* css动画 */
}
@keyframes slide{/* 关键帧 */
0%{margin-left: 0px;}
25%{margin-left: -1520px;}
50%{margin-left: -3040px;}
75%{margin-left: -4560px;}
100%{margin-left: -6080px;}
}
.box ul li{
width: 1520px;
height: 500px;
float: left;
list-style: none;
}
.box ul img{
width: 100%;
height: 100%;
}