大佬教程收集整理的这篇文章主要介绍了HTML5 和CSS3超酷文字遮罩动画特效，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这23种不同的SVG和CSS3技术实现的文字遮罩动画效果的浏览器兼容性也各不相同，下面会列出各个效果的浏览器兼容情况。
BACkground-clip: text
在Webkit浏览器中使用 BACkground-clip: text 属性
浏览器支持: Chrome Firefox Internet Explorer Safari Opera
BACkground-clip: text属性目前只有基于Webkit的浏览器才支持，并且只在前缀-webkit-下工作。
在Firefox或IE浏览器中使用 BACkground-clip: text 属性
在Firefox或IE浏览器中，不支持BACkground-clip: text属性，在这些浏览器中，我们看到的效果如下图：
我们可以使用带-webkit-前缀的CSS渐变来在Webkit以外的浏览器中将背景去除掉。
1 |
<font size="3">.Box-with-text {
|
2 |
BACkground-image: -webkit-linear-gradient(transparent,transparent),
|
3 |
url(IMAGE URL);
|
4 |
-webkit-text-fill-color: transparent;
|
5 |
-webkit-BACkground-clip: text;
|
6 |
}<br></font>
|
在FF或IE浏览器中，你看到的只是黑色的背景和白色的文字。
使用BACkground-clip: text制作动画
可以通过改变BACkground position和size属性来制作动画效果，但是颜色不能平滑过渡。
@H_868_301@
使用BACkground-clip: text属性不能做到跨浏览器，并且制作文字背景动画的能力非常有限。
SVG文本
浏览器支持: Chrome Firefox Internet Explorer Safari Opera
SVG现在已经被浏览器广泛支持，通过SVG可以有三种@L_607_28@制作文字背景：
fill
mask
clip-path
想了解SVG可以参考SVG specification，以及Sara SouEIDan的SVG文章，或者这篇SVG tutorials。
SVG文字
1 |
<svg viewBox="0 0 600 300">
|
2 |
<@R_302_3801@-anchor="middle" x="50%" y="50%" dy=".35em" class="text">
|
3 |
Text
|
4 |
</text>
|
5 |
</svg> |
结果如下：
背景渐变的SVG文字
要在SVG文字中使用渐变，只需要指定SVG的fill属性，当使用某种渐变或模式的时候，它们的ID必须定义在url()中。
用CSS制作背景渐变的SVG文字 可以在CSS中设置渐变颜色，但是需要使用SMIL来增强控制。关于SMIL，可以参考A Guide to SVG Animations (SMIL)。
<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,50%)" offset="90%"/>
</linearGradient> <@R_302_3801@-anchor="middle" x="50%" y="50%" dy=".35em" class="text" fill="url(#gr-simplE)">
@H_904_618@ 另外还可以在CSS中定义： 01
<!-- Gradient -->02 |
<radialGradient id="gr-radial"
|
03 |
cx="50%" cy="50%" r="70%">
|
04 |
<!-- Animation for radius of gradient -->
|
05 |
<animate attributename="r"
|
06 |
values="0%;150%;100%;0%"
|
07 |
dur="5s" repeatCount="indefinite" />
|
08 |
<!-- Animation for colors of stop-color -->
|
09 |
<stop stop-color="#FFF" offset="0">
|
10 |
<animate attributename="stop-color"
|
11 |
values="#333;#FFF;#FFF;#333"
|
12 |
13 |
</stop>
|
14 |
<stop stop-color="rgba(55,55,0)" offset="100%"/>
|
15 |
</radialGradient> |
SVG文字中的patterns
SVG文字的patterns可以是任何形式的SVG图形或图片。patterns可以非常简单，也可以非常复杂。SVG patterns不会因为缩放而变形。
上图中圆形的pattern的代码如下：
SVG文字中更复杂的patterns
@H_632_1607@<font size="3"><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><br></font>
可以使用动态背景图片来填充SVG文字。虽然文件会增大，但是效果非常炫酷。
HTML描边文字 对于HTML文字，可以使用text-shadow来制作款浏览器的文字描边效果。
SVG描边文字 不同于在HTML，SVG中的所有元素都可以制作描边效果。描边还可以被填充渐变和patterns。
SVG遮罩和SVG clippath 有两种类型的SVG遮罩。也可以在CSS对HTML元素添加遮罩效果，但是跨浏览器的支持不是太好。 SVG遮罩也可以使用在HTML元素上，但是这个特性只在Firefox浏览器中才支持。所有现代浏览器都支持在SVG元素上使用SVG遮罩效果。并且clippath和mask都可以包含文字。
@H_68_69@mix blend mode 使用Mix blend模式制作的文字效果只有在Firefox和Safari浏览器中才可以看到效果。
SVG mask and HTML
想认识志同道合的朋友一起学习web 丰富的学习资源，周一到周四免费直播公开课 你可能感兴趣的精彩内容 ▶苹果20年变迁史……hot! （回复R004） ▶视觉冲击！有哪些完美利用色彩冲突的优秀网站？hot!（回复R006） ▶千万别学这七个让人抓狂的网页设计hot!（回复R016） ↓↓↓<font size="3"><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"/>
@H_904_618@ 不同于BACkground-clip: text，这个效果可以在大多数现代浏览器中正确显示。
以上是大佬教程为你收集整理的HTML5 和CSS3超酷文字遮罩动画特效全部内容，希望文章能够帮你解决HTML5 和CSS3超酷文字遮罩动画特效所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。