7.13-7.17(1)

之前我们使用了css实现普通背景渐变，这次来使用渐变和动画实现动态流光文字效果。

需要的标签：-webkit-gradient和-webkit-background-clip，其他浏览器兼容前缀请自改。

-webkit-gradient是webkit内核浏览器的线性渐变，方法可自行百度（可参考http://blog.sina.com.cn/s/blog_6d48e77101016kzr.html）。

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	外部渐变结束圆的半径

 

另外background-clip的作用是控制元素背景显示区域，通过text属性就可以实现背景图片来填充文本的效果。

<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>