首页 > 代码库 > 无缝衔接demo
无缝衔接demo
如题。
<!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>
无缝衔接demo
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。