通过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%; }