<style> @-webkit-keyframes move{ 0%{left:0px;} 100%{left:-500px;} } #wrap{ 500px; height:100px; border:1px solid #000000; position:relative; margin:100px auto; overflow:hidden; } /*定位的时候可以不写px*/ #list{ position:absolute; left:0; padding:0px; padding:0px; -webkit-animation:3s move infinite;200%; } #list li{ list-style:none; 98px; height:98px; border:1px solid #234aab; color:#ffffff; background:#000; font-size:50px; text-align:center; float:left; } /*-webkit-animation-play-state:paused;当鼠标放上去时停止*/ #wrap:hover #list{ -webkit-animation-play-state:paused; } </style> </head> <body> <div id="wrap"> <!-- li{$}*5 --> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>