<html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin:0; padding:0; } ul { ist-style:none; } #wrap { width:600px; height:400px; margin:30px auto; border:1px solid #9cc5ef; overflow:hidden; } #slider { width:300%; height:100%; font:100px/400px Microsoft Yahei; text-align:center; color:#fff; margin-left:0; -webkit-animation:slide1 10s linear infinite; } #slider li { float:left; width:600px; height:100%; } #slider li:nth-child(1) { background:#6bacef; } #slider li:nth-child(2) { background:#297cd3; } #slider li:nth-child(3) { background:#01254a; } /*创建三种动画策略*/ @-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;} } </style> </head> <body> <div id="wrap"> <ul id="slider"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>