渐变动画效果

      渐变是从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

     线性渐变可被定义为水平、垂直或角形的渐变：

• 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
• 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
• 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

     下面我用图片和语言文字来完成渐变动画的效果，我们先看HTML部分。如下：

     就用他来完成一个文字渐变效果，把外层div设置一个容器将里面包裹着，里面span标签给它设置相应的属性，把它位置放好；

 

     通过背景图像background-image该属性使用linear-fradient来设置每段（时间/阶段）颜色设置；成品图：代码：

 

       但是我们要做的是文字和颜色融合，这时就要使用-webkit-background-clip:text;来规定背景的绘制区域，还要使用color：transparent；来将它们融合起来；还有一定要加-webkit-这个前缀，要不然也是没用的，它的字体就会被颜色值所埋没，就只能看到颜色，而文字则没有；

    Transparent值：尽管在大多数情况下，没有必要使用 transparent。不过如果你希望某元素拥有背景色，那设置它就很有必要了；成品如下：代码：

关键代码如下：

 

                                                                                                                               一个20级的程序猿