CSS水平无缝滚动效果
分类:实例代码
分享一段代码实例,它利用纯css实现了水平无缝滚动效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> @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; 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 { 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>
上面的代码实现了我们的要求,更多内容可以参阅相关阅读。
相关阅读:
(1).@keyframes参阅CSS3 @keyframes一章节。
(2).animation参阅CSS3 animation一章节。
(3).animation-play-state参阅css3 animation-play-state一章节。