Html5 SVG CSS3技术制作精美文字遮罩动画特效

素马设计作为深圳企业建站公司最优秀的公司之一，在多年的品牌集团建站实战中总结出很多非常有意思的文字遮罩动画特效。想起2004年时我们刚刚为企业建站采用的动画特效还是flash做的。随着互联网技术的兴起以及顾客端硬件设配的升级，现在越来越多的设备支持了由Html5,svg,css3制作出的各种文字遮罩动画特效了。文字遮罩动画特效我们用的做多的地方就是一个企业官网的banner上或者开门红的网站引导页上，或者一些非常精致的小的点缀元素上。今天提到的这个动画特效技术，本属于网站前端制作工艺方面的事情，但又跟ui视觉界面设计紧密相关。设计师先想到如何设计出杰出精美的视觉，前端专家才会去考虑如何实现。来了，今天分享的这篇文章就是告诉前端工程师是如何实现文字遮罩动画特效的。

-

01

在Webkit浏览器中使用 background-clip: text 属性

background-clip: text属性目前只有基于Webkit的浏览器才支持，并且只在前缀-webkit-下工作。

查看实战效果

http://demo.htmleaf.com/1502/201502182149/index.html

-

02

使用background-clip: text制作动画

可以通过改变background position和size属性来制作动画效果，但是颜色不能平滑过渡。使用background-clip: text属性不能做到跨浏览器，并且制作文字背景动画的能力非常有限。

查看实战效果

http://demo.htmleaf.com/1502/201502182149/index3.html

-

03

SVG文本

SVG现在已经被浏览器广泛支持，通过SVG可以有三种方法制作文字背景：

-fill

-mask

-clip-path

SVG文字

使用SVG制作文字的基本代码如下：

<svg viewBox="0 0 600 300">

  <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text">

      Text

    </text>

</svg>

结果如下：

查看实战效果

http://demo.htmleaf.com/1502/201502182149/index4.html

背景渐变的SVG文字

可以给SVG文字填充背景，描边和设置其他一些属性。

一个简单的渐变元素类似下面的代码：

<linearGradient id="gr-simple" x1="0" y1="0" x2="100%" y2="100%">

    <stop stop-color="hsl(50, 100%, 70%)" offset="10%"/>

    <stop stop-color="hsl(320, 100%, 50%)" offset="90%"/>

</linearGradient>

要在SVG文字中使用渐变，只需要指定SVG的fill属性，当使用某种渐变或模式的时候，它们的ID必须定义在url()中。

<svg viewBox="0 0 600 300">

  <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text" fill="url(#gr-simple)">

      Text

  </text>

</svg>

另外还可以在CSS中定义：

.text {fill: url(#gr-simple);}

查看实战效果

http://demo.htmleaf.com/1502/201502182149/index5.html

用CSS制作背景渐变的SVG文字

可以在CSS中设置渐变颜色，但是需要使用SMIL来增强控制。

<radialGradient id="gr-radial"

    cx="50%" cy="50%" r="70%">

    <animate attributeName="r"

             values="0%;150%;100%;0%"

             dur="5s" repeatCount="indefinite" />

    <stop stop-color="#FFF" offset="0">

      <animate attributeName="stop-color"

             values="#333;#FFF;#FFF;#333"

             dur="5s" repeatCount="indefinite" />

    </stop>

    <stop stop-color="rgba(55,55,55,0)" offset="100%"/>

</radialGradient>

查看实战效果

http://demo.htmleaf.com/1502/201502182149/index7.html

SVG文字中的patterns

SVG文字的patterns可以是任何形式的SVG图形或图片。patterns可以非常简单，也可以非常复杂。SVG patterns不会因为缩放而变形。

上图中圆形的pattern的代码如下：

<pattern id="p-spots" viewBox="0 0 80 80" patternUnits="userSpaceOnUse" width="60" height="60" x="5" y="5">

   <g class="g-spots">

      <circle r="5" cx="10" cy="10"/>

      <circle r="7" cx="30" cy="30"/>

      <circle r="5" cx="50" cy="10"/>

      <circle r="9" cx="70" cy="30"/>

      <circle r="11" cx="50" cy="50"/>

      <circle r="5" cx="10" cy="50"/>

      <circle r="7" cx="30" cy="70"/>

      <circle r="9" cx="70" cy="70"/>

    </g>

</pattern>

查看实战效果

http://demo.htmleaf.com/1502/201502182149/index6.html

使用GIF图片制作SVG文字的背景

可以使用动态背景图片来填充SVG文字。虽然文件会增大，但是效果非常炫酷。

使用图片来做pattern填充SVG，代码类似如下：

<pattern id="p-fire" viewBox="30 100 186 200" patternUnits="userSpaceOnUse" width="216" height="200" x="-70" y="35">

  <image xlink:href="http://yoksel.github.io/about-svg/assets/img/parts/fire.gif"

      width="256" height="300"/>

</pattern>

查看实战效果

http://demo.htmleaf.com/1502/201502182149/index9.html

不同于background-clip: text，这个效果可以在大多数现代浏览器中正确显示。

虚线带动画效果的SVG描边文字

SVG描边文字可以制作为虚线，并使之产生动画效果。

查看实战效果

http://demo.htmleaf.com/1502/201502182149/index12.html

以上8个效果是我们做界面设计时比较容易实现且又利于前端工程师制作实现的。还有很多其他奇奇怪怪的特效，但个人觉得有点过了，不太适合在上市集团官网上使用，而且考虑到更多的兼容性方面的问题，通常我们用文字遮罩特效都是画龙点睛，点到为止即可。

例如我们的一个实战案例中，海报上的大标题文字就采用了一个渐变色填充的特效，但是考虑到兼容性问题，在制作时不得不周全考虑，采用了png图片。如下

所以，采用新技术时，往往都要受到硬件设配及技术方面的限制，有些顾客的受众群体的浏览时设备并非那么潮流。当然，一些从事艺术及尖端技术行业的企业集团，则特地要求我们采用最新技术，要求新锐，科技前沿特效制作，以表他们的前瞻性和方向标。