搜索
走访
哪怕
她们一直在等待日本政府的
道歉
日本政府一直在等待她们的
死亡
但是
用生命和时间赛跑的
不止她们，还有我们
8月15日日本投降纪念日
代码致敬
《
三十二》、《二十二》
更不要忘记
她们
二十二
▼
三十二
▼
如果你对上文中 JZ 多媒体解决方案设计的慰安妇强征名单「搜索动画」的代码实现有学习需要，请继续阅读以下教程；如果没有学习需要，则欢迎分享。
1）
遮罩，是蒙版的一种重要形态。在 HTML5 中，遮罩的实现方式多种多样，而
CSS
遮罩最为常见。通常来说，只要有遮罩层和背景层或背景文字，遮罩的效果就可以被用户比较明显地观察到
▼
.demo {
-webkit-mask : url("images/mask.png");
background-image: url("images/logo.png");
}
2）有了这个标准模型，我们就不仅可以选择 .png 的静态背景和遮罩，自然也可以如本文中，载入了两个 .gif 的动态背景和遮罩。另外，背景层和遮罩层都可以做更丰富的参数设置。比如根据 W3C 的规则手册，我们可以调整遮罩形式
▼
.demo {
/* 图片型 */
-webkit-mask : url(mask.png);
/* 渐变型 */
-webkit-mask : linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
/* 图片滤色型 */
-webkit-mask : image(url(mask.png), skyblue);
/* 图片渐变型 */
-webkit-mask : url(mask.png'), linear-gradient(rgba(0, 0, 0, 1), transparent);
}
3）需要注意的是，由于微信图文消息的自适效果并不好，所以当我们在处理遮罩的
和
时都可以适当考虑平铺方式，避免彼此覆盖不足露出元素的尴尬情况
▼
.demo {
-webkit-mask-repeat : no-repeat | repeat-x | repeat-y | space | round | repeat(默认值);
}
4）可以加上文案，让遮罩富有更深刻的内涵。这样一来，像本文的遮罩动画就一共有三层：遮罩层是一张 .gif，它的内容包括圆形的游走和放大路径，你大约只需要3-5分钟就可以在 AE 里做出一个
▼
PS：如果你对 AE 还一脸茫然，请扫描这里的二维码加入 JZ 的技术课程先行学习
▼
考虑到 JZ 的高级代码设计经常被盗用，所以不妨通过 PS 的动态模式增加一个水印，并导出为 .gif 用作遮罩
▼
4）
背景图片
的选择这里我们就不多讲了，当然如果你想具体了解 .gif 文件的制作方法，也可以点击阅读《
如何制作 GIF（上）
》和《
如何制作 GIF（下）
》逐步学习。另外要提醒的是
和
也可以用来更好地让遮罩与背景巧妙对齐，实现独特的效果。比如本文的遮罩层就能够相对准确地在 6.13 秒时基本露出红色的「完整名单」四个字。而关于
背景文字
，本文的名单编辑讨巧使用了
秀米编辑器
的布局功能，最后在带有 HTML5 编辑功能的 135 编辑器中加入了遮罩动画。
所以，本质上只需要两端代码和两张图片，我们都可以在微信中实现遮罩动画，关键还是拼创意。
这里是 JZ 多媒体解决方案，中国最好的 Digital 数字营销先锋技术神秘厂牌，想要了解更多新媒体高级运营技术，也可以加入我们的网易云课堂深度学习
▼
|
网易云课堂
高级排版术
|
|
详情点击此处
- END -
#招聘启事#广告设计师 职务要求：
1.有扎实的平面设计功底
2.有扎实的动效设计功底
3.对广告创意有独立见解
4.对界面交互有基本认知
5.应届毕业或毕业两年内
