【文件属性】：
文件名称：burberryshow:腾讯Burberry线上营销页面特效
文件大小：1.67MB
文件格式：ZIP
更新时间：2021-07-04 07:27:48
JavaScript
腾讯Burberry线上营销页面特效
4月24日，Burberry亚太地区规模最大的旗舰店在上海开幕。Burberry突破性地运用了诸多创新的数字营销模式，借助与腾讯的合作，为更多未能到场的用户创造了一个“平行的体验”，也正式开启了Burberry的创新数字营销之旅。
其中多次用到了开头的图片中类似于云雾褪去的效果。
我对这种神奇的特效产生的极大的兴趣，于是通过chrome的审查元素里面Resources找到下面这张图片（由于图片是白色的png，为了让大家看清楚我将背景调成了黑色）。
于是效果的实现方式就显而易见了，是利用css3的-webkit-mask来实现的。
-webkit-mask类似于photoshop里面的蒙板，在背景图片上加上一层蒙板，背景中的图片会透过蒙板中的白色部分显示出来，蒙板中的透明部分则遮挡住了背景。
####Step1.为背景加上蒙板
<body>
<div
【文件预览】：
burberryshow-master
----images()
--------Touch1.jpg(57KB)
--------2.gif(120KB)
--------Touch1.png(19KB)
--------txqr.png(1KB)
--------3.gif(459KB)
--------xg.gif(547KB)
--------1.jpg(69KB)
----spriteClip.js(1KB)
----README.md(9KB)
----index.html(4KB)
----img()
--------Touch1.png(19KB)
--------bg2.jpg(95KB)
--------Touch3.png(21KB)
--------Touch4.png(180KB)
--------bg.jpg(111KB)
--------Touch2.png(27KB)