CSS3实现无缝滚动
2016-05-03 21:32
549 查看
<!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>
相关文章推荐
- CSS三列布局
- CSS3滤镜-水平和垂直翻转图片
- css3滤镜-投影(DropShadow)滤镜
- DIV+CSS中的相对定位和绝对定位
- css3滤镜-色彩(Chroma)滤镜
- 使用CSS3滤镜美化效果
- css3滤镜-模糊Blur滤镜
- css3滤镜-通道(Alpha)滤镜
- css滤镜总结
- qt样式表的使用
- CSS3之 3D变换、3D动画
- CSS3:媒体查询
- css行高line-height的一些深入理解及应用
- 对CSS3的理解
- css高度100%布局
- css 选择器,闲时看看,巩固基础
- CSS完全兼容IE6、IE7、IE8、IE9和firefox方法
- 如何使用CSS3/SCSS实现逼真的车窗雨滴效果
- css3 背景图动画一
- 固定fotter