如题。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无缝衔接</title> <style> @-webkit-keyframes move { 0%{ left:0; } 100% { left:-500px; } } #wrap{ width:500px; height:100px; border:1px solid #000; position:relative; margin:100px auto; overflow:hidden; } #list{ position:absolute; left:0; top:0; margin:0; padding:0; -webkit-animation:3s move infinite linear; width:200%; } #list li{ list-style:none; width:98px; height:98px; border:1px solid #fff; background:#000; color:#fff; font:50px/98px Arial; text-align:center; float:left; } #wrap:hover #list{ -webkit-animation-play-state:paused; } </style> </head> <body> <div id="wrap"> <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> </body> </html>