文字和页面特效——实现线性渐变的文字

实现线性渐变的文字

实例描述

在网页制作时，可以通过对文字颜色的设置来实现网页的特殊效果。本实例将使用CSS3实现文字线性渐变的效果。运行实例，在页面中会输出一串线性渐变的文字“越努力，越幸运”，结果如图所示。

技术要点

本实例主要使用了CSS3中的linear-gradient()函数，该函数用于创建一个线性渐变的图像。语法格式如下：

background:linear-gradient(direction, color-stop1, color-stop2, …)

参数说明：

l direction：设置渐变的方向，可以使用角度值。

l color-stop1, color-stop2, …：指定渐变的起止颜色。

为了使更多的浏览器支持该函数，在该属性前需要加上“-webkit-”前缀，后面的实例中介绍的CSS3中的大部分属性，在实例代码中都加上了“-webkit-”前缀。

代码实现

（1）新建index.html文件，在文件中编写HTML代码，定义一个class属性值为content的

标签，在标签中添加文字，代码如下：

<div class="content">
   越努力，越幸运
</div>

（2）在页面中编写CSS代码，应用linear-gradient()函数设置线性渐变的背景，再应用background-clip属性规定背景的绘制区域，最后应用text-fill-color属性设置文字的填充颜色。关键代码如下：

<style type="text/css">
.content{
   margin-top: 30px;
   font-size: 64px;
   background:-webkit-linear-gradient(top, #FF0000, #00FF00);/*设置线性渐变*/
   -webkit-background-clip: text;/*背景被裁剪到文字*/
   -webkit-text-fill-color: transparent;/*设置文字的填充颜色*/
}
</style>