字面移动光斑效果（css3）
用css3的高级部分做一个字面上移动光斑的动态效果：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background-color:#000;}
p{width:660px;font-size:60px;font-weight:bold;color:#ccc;margin:100px auto;line-height:75px;
background:-webkit-linear-gradient(-50deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.8) 49%,rgba(255,255,255,0.8) 51%,rgba(255,255,255,0) 55%) -462px 0 no-repeat,; /* Safari 5.1 - 6.0 */background:-moz-linear-gradient(-50deg, rgba(255,255,255,0) 45%, rgba(255,255,255,1) 49%,rgba(255,255,255,0.8) 51%,rgba(255,255,255,0) 55%) -462px 0 no-repeat; /* Firefox 3.6 - 15 */
background:linear-gradient(-50deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.8) 49%,rgba(255,255,255,0.8) 51%,rgba(255,255,255,0) 55%) -462px 0 no-repeat; /* 标准的语法*/
background-clip:text;background-origin:content-box;
color:rgba(204,204,204,0.5);-webkit-animation:'test' 3s forwards linear infinite;}
@keyframes test
{
from { background-position:-660px 0; }
to { background-position:660px 0; }
}
</style>
</head>
<body>
<p>XIN ZHUO YUE</p>
</body>
</html>
效果如下：