无限滚动特效

 !DOCTYPE HTML 

 html 

 head 

 meta http-equiv="Content-Type" content="text/html; charset=utf-8" 

 title 无标题文档 /title 

 style 

@-webkit-keyframes move

 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