用css3写了个滚动特效，可以向左滚动、向右滚动，方向自由控制，没用JavaScript或者jQuery纯css3写的，鼠标悬停在上面时可以终止动画，纯css3滚动特效和JavaScript或者jQuery写的效果一样。熟悉css3的animation动画属性一下就很好理解原理，具体的请看效果和代码吧！点击我看演示（地址：http://tangjiusheng.com/e/demo/css3-rolled）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="baidu-site-verification" content="ZP6BgXCtjB" />
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta name="applicable-device" content="pc">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>纯css3滚动特效代码</title>
<style type="text/css">
.rolled{
position:fixed;bottom:20%;z-index:9999999;
-webkit-animation:rolled 50s .2s ease both infinite;
-moz-animation:rolled 50s .2s ease both infinite;
-o-animation:rolled 50s .2s ease both infinite;
-ms-animation:rolled 50s .2s ease both infinite;
}
.rolled:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
-ms-animation-play-state:paused;
}
/*滚动动画*/
@-webkit-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@-moz-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@-o-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@-ms-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
</style>
</head>
<body>
<!--向左重复滚动动画-->
<div class="rolled">
<a href="#"><img src="images/rolled.png"></a>
</div>
</body>
</html>
除注明外的文章,均为来源:汤久生博客,转载请保留本文地址！
原文地址：http://tangjiusheng.com/css3/101.html