-webkit-mask制作文本渐显效果 文本制作

互联网给我们带来方便的同时，也时常让我们感到困惑。随便搜搜就出一大堆结果，然而总是有大量的重复和错误。小妖发出的内容，都是自己实测过的，有问题请留言。

来活了，设计师要做一个文本渐显的效果，我们的目标是这样的：

这。。太简单了，width++ && overflow: hidden; 搞定，代码如下：

实现的效果是这样的：

嗯。。自己也感觉有点不好交差，两点问题：

• 右下角没有渐显的半透明效果

• 文字是一个个蹦出来的，不流畅啊

为了解决第一个问题，聪明的我们想到了 -webkit-mask，给右下角加一个渐变的 mask 就可以了，于是有了方式二：

由左上向右下铺一个渐变的 mask，从 80% 到 100%，透明度从 1 渐变到 0，就有了右下角的半透明效果。第一个问题解决了！见效果：

第二个问题嘛，灵光一动，想到N种取巧的方式，只要把文本做成图片就可以了，或者再套一层容器，外层容器 width++ && overflow: hidden; 内层容器 width: 640px; 就可以确保文本不是一个个出现的。收工！

然而，拿到头儿那里一看，不行！动画，一定要注意动画性能，改变 width 犯了动画的大忌，导致浏览器不断重绘，太卡。

万万没想到，最终，我们还是如愿以偿地实现了设计师脑海里的效果。只需要在方式二的基础上更好的运用 -webkit-mask 的几种属性就可以了，代码如下：

容器和 mask 的 width 都为 640，只需要改变 mask-position 就可以了，很简单吧。

效果：

所有代码见Demo页：

http://xngeer.frostbelt.cn/itemcss/-webkit-mask.php

例子讲完了，我们再详细的了解一下 mask，mask 的属性与 background 很相似：

-webkit-mask-image: url(mask.png);

-webkit-mask-size: 100% 100%;

-webkit-mask-position: 0 0;

-webkit-mask-origin: border(默认) padding content;

-webkit-mask-repeat: repeat round no-repeat;

也可以像 background 一样连写。-webkit-mask-image 也可以使用渐变：

-webkit-mask: -webkit-linear-gradient(-45deg, rgba(0,0,0,1), rgba(0,0,0,1) 80%, rgba(0,0,0,0));

大家可以自己写个 Demo，熟悉一下各属性的功能，像这样：

这里就不贴代码啦，自己做个练习吧~