用纯css3打造滚动特效

用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" alt="用纯css3打造滚动特效"></a>

</div>

</body>

</html>