这是一组使用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-下工作。
在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浏览器中，你看到的只是黑色的背景和白色的文字。
使用background-clip: text制作动画
可以通过改变background position和size属性来制作动画效果，但是颜色不能平滑过渡。
使用background-clip: text属性不能做到跨浏览器，并且制作文字背景动画的能力非常有限。
SVG文本
浏览器支持: ChromeSupported
FirefoxSupported
Internet ExplorerSupported
SafariSupported
OperaSupported
SVG现在已经被浏览器广泛支持，通过SVG可以有三种方法制作文字背景：
fill
mask
clip-path
SVG文字
使用SVG制作文字的基本代码如下：
Text
结果如下：
背景渐变的SVG文字
可以给SVG文字填充背景，描边和设置其他一些属性。
一个简单的渐变元素类似下面的代码：
要在SVG文字中使用渐变，只需要指定SVG的fill属性，当使用某种渐变或模式的时候，它们的ID必须定义在url()中。
Text
另外还可以在CSS中定义：
.text {fill: url(#gr-simple);}
用CSS制作背景渐变的SVG文字
可以在CSS中设置渐变颜色，但是需要使用SMIL来增强控制。关于SMIL，可以参考A Guide to SVG Animations (SMIL)。
cx="50%" cy="50%" r="70%">
values="0%;150%;100%;0%"
dur="5s" repeatCount="indefinite" />
values="#333;#FFF;#FFF;#333"
dur="5s" repeatCount="indefinite" />
SVG文字中的patterns
SVG文字的patterns可以是任何形式的SVG图形或图片。patterns可以非常简单，也可以非常复杂。SVG patterns不会因为缩放而变形。
上图中圆形的pattern的代码如下：
SVG文字中更复杂的patterns
使用GIF图片制作SVG文字的背景
可以使用动态背景图片来填充SVG文字。虽然文件会增大，但是效果非常炫酷。
使用图片来做pattern填充SVG，代码类似如下：
width="256" height="300"/>
不同于background-clip: text，这个效果可以在大多数现代浏览器中正确显示。
HTML描边文字
对于HTML文字，可以使用text-shadow来制作款浏览器的文字描边效果。
SVG描边文字
不同于在HTML，SVG中的所有元素都可以制作描边效果。描边还可以被填充渐变和patterns。
虚线带动画效果的SVG描边文字
SVG描边文字可以制作为虚线，并使之产生动画效果。
SVG遮罩和SVG clippath
浏览器支持: ChromeSupported
FirefoxSupported
Internet ExplorerSupported
SafariSupported
OperaSupported
有两种类型的SVG遮罩。也可以在CSS对HTML元素添加遮罩效果，但是跨浏览器的支持不是太好。
SVG遮罩也可以使用在HTML元素上，但是这个特性只在Firefox浏览器中才支持。所有现代浏览器都支持在SVG元素上使用SVG遮罩效果。并且clippath和mask都可以包含文字。
Mix blend mode
浏览器支持: ChromeExperimental flag
FirefoxSupported
Internet ExplorerNot supported
SafariSupported
OperaExperimental flag
使用Mix blend模式制作的文字效果只有在Firefox和Safari浏览器中才可以看到效果。
使用Mix blend模式制作的文字效果只有在Firefox和Safari浏览器中才可以看到效果。
SVG mask and HTML
浏览器支持: ChromeSupported
FirefoxSupported
Internet ExplorerSupported
SafariSupported
OperaSupported
