HTML5 SVG和CSS3超酷文字遮罩动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一组使用HTML5 SVG和CSS3技术制作的超酷文字遮罩动画特效。这一组文字遮罩动画特效中共有23种效果，分别使用23种不同的SVG和CSS3技术来实现。

这23种不同的SVG和CSS3技术实现的文字遮罩动画效果的浏览器兼容性也各不相同，下面会列出各个效果的浏览器兼容情况。

background-clip: text

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

浏览器支持:

ChromeSupported
FirefoxNot supported
Internet ExplorerNot supported
SafariSupported
OperaSupported

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

SVG文字遮罩动画效果-1

查看DEMO1

在Firefox或IE浏览器中使用 background-clip: text 属性

在Firefox或IE浏览器中，不支持background-clip: text属性，在这些浏览器中，我们看到的效果如下图：

SVG文字遮罩动画效果-2

我们可以使用带-webkit-前缀的CSS渐变来在Webkit以外的浏览器中将背景去除掉。

.box-with-text {
  background-image: -webkit-linear-gradient(transparent, transparent),
                    url(IMAGE URL);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  }

在FF或IE浏览器中，你看到的只是黑色的背景和白色的文字。

查看DEMO2

使用background-clip: text制作动画

可以通过改变background position和size属性来制作动画效果，但是颜色不能平滑过渡。

SVG文字遮罩动画效果-4

查看DEMO3

使用background-clip: text属性不能做到跨浏览器，并且制作文字背景动画的能力非常有限。

SVG文本

浏览器支持:

ChromeSupported
FirefoxSupported
Internet ExplorerSupported
SafariSupported
OperaSupported

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

fill
mask
clip-path

想了解SVG可以参考SVG specification，以及Sara Soueidan的SVG文章，或者这篇SVG tutorials。

SVG文字

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

<svg viewBox="0 0 600 300">
  <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text">
      Text
    </text>
</svg>

结果如下：

SVG文字遮罩动画效果-5

查看DEMO4

背景渐变的SVG文字

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

SVG文字遮罩动画效果-6

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

<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);}

查看DEMO5

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

可以在CSS中设置渐变颜色，但是需要使用SMIL来增强控制。关于SMIL，可以参考 A Guide to SVG Animations (SMIL)。

SVG文字遮罩动画效果-7

<!-- Gradient -->
<radialGradient id="gr-radial"
    cx="50%" cy="50%" r="70%">
    <!-- Animation for radius of gradient -->
    <animate attributeName="r"
             values="0%;150%;100%;0%"
             dur="5s" repeatCount="indefinite" />
    <!-- Animation for colors of stop-color -->
    <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>

查看DEMO6

SVG文字中的patterns

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

SVG文字遮罩动画效果-8

上图中圆形的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>

查看DEMO7

SVG文字中更复杂的patterns

SVG文字遮罩动画效果-9

查看DEMO8

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

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

SVG文字遮罩动画效果-10

使用图片来做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>

查看DEMO9

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