标签：
之前我们使用了css实现普通背景渐变，这次来使用渐变和动画实现动态流光文字效果。
需要的标签：-webkit-gradient和-webkit-background-clip，其他浏览器兼容前缀请自改。
webkit核心浏览器下的的基本语法如下：
-webkit-gradient(type, start_point, end_point, / stop...) -webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
参数
| 参数类型 | 简要说明 |
|---|---|
| type | 渐变的类型，可以是线性渐变(linear)或是径向渐变(radial) |
| start_point | 渐变图像中渐变的起始点 |
| end_point | 渐变图像中渐变的结束点 |
| stop | color-stop()方法，指定渐变进程中特定的颜色 |
| inner_center | 内部中心点，径向渐变起始圆环 |
| inner_radius | 内部半径，径向渐变起始圆 |
| outer_center | 外部渐变结束圆的中心点 |
| outer_radius | 外部渐变结束圆的半径 |
<style type="text/css" media="all">
html,body{ background:#000;}
p.text
{
width: 700px;
}
.text
{
background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 125px;
color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
font-family:"微软雅黑";
font-size:60px;
font-weight:bold;
display:block;
position:absolute;
left:50%; margin-left:-350px;
top:50%; margin-top:-100px;
-webkit-animation-name: liuguang;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes liuguang
{
0%
{
background-position: top left;
}
100%
{
background-position: top right;
}
}
</style>
标签：
原文地址：http://www.cnblogs.com/sinea17/p/4659828.html
