用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