IT兄弟连 HTML5教程 CSS3属性特效 渐变2 线性渐变实例

3 线性渐变实例

一、颜色从顶部向底部渐变

制作从顶部到底部直线渐变有三种方法，第一种是起点参数不设置，因为起点参数的默认值为“top”；第二种方法起点参数设置为“top”；第三种起点参数使用“-90deg”关键词。为top_bottom设置从顶部向底部的渐变，三种方法的CSS代码如下：

第一种方法：

第二种方法：

第三种方法：

上述三种css设置运行的效果相同，top_bottom的背景变为从白色到黑色的自上而下形成线性渐变。在浏览器中查看效果如图1所示：

图1  顶部到底部的线性渐变

同样，我们可以将起点参数设置为bottom、left、right，依次是从底部向顶部渐变，从左边向右边渐变和从右边向左边渐变。

二、颜色从左下角向右上角渐变

制作从左下角到左上角直线渐变有两种方法，第一种是起点参数设置为“bottom left”；第二种起点参数使用“45deg”关键词。为left_bottom设置从顶部向底部的渐变，CSS代码如下：

第一种方法：

第二种方法：

上述两种css设置运行的效果相同，left_bottom的背景变为从左下角到右上角形成线性渐变。在浏览器中查看效果如图2所示：

图2  左下角到右上角的线性渐变

三、多色线性渐变

前面向大家演示的效果仅是一些简单的线性渐变（两色渐变），其实在实际中，渐变不仅仅是只有两种颜色，会有多色。接下来，我们一起来看一个从左向右的五彩渐变，代码如下：

将包含上述代码的html文件在浏览器中查看，渐变效果如图3所示：

图3  五色渐变

四、自定义线性渐变

那么问题来了，如何实现下图的渐变效果？

通过上图可以注意到，颜色从0％的不透明度开始，第一个色标的位置位于0%,其透明度为0%，第二个色标位置为80%的不透明度，位置位于8%。我们可以通过渐变工具从CSS声明中捕捉相关数据，我们可以实现自定义线性渐变，CSS代码如下：

将替换了CSS代码的html在浏览器中查看，渐变效果如图4所示：

图4  自定义线性渐变

上图再证明，一个渐变可以包含多个色标，位置值为0~1之间的小数，或者0~100%之间的百分数，指定色标的位置比例，其用法与Photoshop中的值线渐变工具用法相似。

五、进度条

应用CSS3线性渐变，我们还可以实现进度条效果。制作进度条，我们需要使用到repeating-linear-gradient参数。repeating-linear-gradient的含义是用重复的线性渐变创建图像。repeating-linear-gradient()的语法与linear-gradient()相同。实现进度条效果，代码如下：

首先构造一个进度条，当鼠标移入进度条时，进度条开始运动，在浏览器中查看效果如图5所示：

图5  进度条