转载

HTML5 SVG和CSS3超酷文字遮罩动画特效

简要教程

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

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

查看演示 下载插件

background-clip: text

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

浏览器支持:Chrome Firefox Internet Explorer Safari Opera

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

查看DEMO1

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

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

我们可以使用带-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属性来制作动画效果，但是颜色不能平滑过渡。

查看DEMO3

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

SVG文本

浏览器支持: Chrome Firefox Internet Explorer Safari Opera

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>

结果如下：

查看DEMO4

背景渐变的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);}

查看DEMO5

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

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

<!-- 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不会因为缩放而变形。

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

查看DEMO8

使用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>

查看DEMO9

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

HTML描边文字

对于HTML文字，可以使用text-shadow来制作款浏览器的文字描边效果。