4月24日，burberry亞太地區(qū)規(guī)模最大的旗艦店在上海開幕。burberry突破性地運用了諸多創(chuàng)新的數(shù)字營銷模式，借助與騰訊的合作，為更多未能到場的用戶創(chuàng)造了一個“平行的體驗”，也正式開啟了burberry的創(chuàng)新數(shù)字營銷之旅。
騰訊的營銷頁面：?
其中多次用到了類似于云霧褪去的效果，如下圖。
我對這種神奇的特效產(chǎn)生的極大的興趣，于是通過chrome的審查元素里面Resources找到下面這張圖片（由于圖片是白色的png，為了讓大家看清楚我將背景調(diào)成了黑色）。
于是效果的實現(xiàn)方式就顯而易見了，是利用css3的-webkit-mask來實現(xiàn)的。
####Step1.為背景加上蒙板 ?
立即學習“前端免費學習筆記（深入）”；
<body> <div class="stage"> <div class="sprite1"></div> </div></body>
.stage{ width: 320px; height: 480px; position: absolute; left: 50%; top: 50%; margin-top:-240px; margin-left:-160px; background: url('./img/bg.jpg') no-repeat; background-size: auto 100%;}.stage .sprite1{ width: 100%; height: 100%; background: url('./img/bg2.jpg') no-repeat; background-size: auto 100%; -webkit-mask:url('./img/Touch1.png') no-repeat; -webkit-mask-size: 100% 100%;}-webkit-mask:url('./img/Touch1.png') no-repeat;-webkit-mask-size: 100% 100%; 我們這里將蒙板的大小設置為100%來觀察蒙板的效果。圖中畫圈圈的地方就是sprite1透過蒙板展示出來的部分。
我們看到這個蒙板Touch1.png應該是一個序列幀組成的圖片，我們只需要將其一幀幀的顯示出來就可以實現(xiàn)動畫了。
點擊查看歷史代碼
.stage .sprite1{ ...... -webkit-mask-size: 400% 300%; -webkit-mask-position: 0% 0%;}我們新建一個spriteClip類，并傳入(dom,w,h,time)四個參數(shù)，其中dom用來定位sprite1這個元素，w為一排有幾幀，h為一共有幾行，time為每一幀之間的間隔。
立即學習“前端免費學習筆記（深入）”；
function spriteClip(dom,w,h,time){ if(dom){ this.dom = dom; this.w = w ||0; this.h = h ||0; this.time = time || 0; }else{ return false; }}新建run方法。遍歷w與h算出時間與位置，用setTimeout設置好延時執(zhí)行
立即學習“前端免費學習筆記（深入）”；
spriteClip.prototype.run = function(){ for(var w=0;w<this.w;w++){ for(var h =0;h<this.h;h++){ //這里使用閉包以免w,h值隨循環(huán)改變。 (function(w,h,self){ //計算時間 var time = (h*self.time*self.w+w*self.time); setTimeout(function(){ //計算位置 self.dom.style.webkitMaskPosition = (100/(self.w-1))*w+'% '+(100/(self.h-1))*h+'%'; },time); })(w,h,this); } }}新建并運行spriteClip。
立即學習“前端免費學習筆記（深入）”；
var sprite1 = document.querySelector('.sprite1');var sp1 = new spriteClip(sprite1,4,3,50);sp1.run(); 運行代碼：
點擊查看歷史代碼
有了sprite1后，再添加3個sprite，將所有的動畫按照順序播放來形成完整的轉(zhuǎn)場。為了實現(xiàn)按照順序的播放，我們需要為動畫添加播放控制。即在播放動畫完成后給dom觸發(fā)一個finish事件，dom接到完成事件后執(zhí)行下一個動畫。同時添加show和hide用來控制動畫的顯示/隱藏。
立即學習“前端免費學習筆記（深入）”；
function spriteClip(dom,w,h,time){ if(dom){ ...... //記錄dom初始的display狀態(tài) this.display = this.dom.style.display; //記錄動畫是否播放過 this.played = false; }else{ return false; }}spriteClip.prototype.run = function(){ //如果動畫已經(jīng)播放過則不做任何動畫 if(this.played) return false; //標記為已播放完成 this.played = true; //讓dom顯示 this.show(); for(var w=0;w<this.w;w++){ for(var h =0;h<this.h;h++){ (function(w,h,self){ var time = (h*self.time*self.w+w*self.time); setTimeout(function(){ ...... if(w >= self.w-1 && h>=self.h-1){ //動畫結(jié)束 var event = document.createEvent('HTMLEvents'); event.initEvent('finish', true, true); event.eventType = 'message'; event.content = 'finish'; //觸發(fā)finish事件 self.dom.dispatchEvent(event); } },time); })(w,h,this); } }}//隱藏domspriteClip.prototype.hide = function(){ this.dom.style.display = 'none';}//顯示domspriteClip.prototype.show = function(){ this.dom.style.display = this.display;}//接收finish時間并用callback函數(shù)處理spriteClip.prototype.finish = function(callback){ this.dom.addEventListener('finish',callback);}var sprite1 = document.querySelector('.sprite1');var sp1 = new spriteClip(sprite1,4,3,50);//在做動畫之前讓sprite隱藏sp1.hide();document.addEventListener('touchend',function(){ //手指抬起后運行動畫 sp1.run();});document.addEventListener('click',function(){ //點擊后運行動畫 sp1.run();});sp1.finish(function(){ //動畫完成 console.log('finish');});下面添加剩下的3個sprite。
立即學習“前端免費學習筆記（深入）”；
.......stage .sprite2{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: url('./img/bg2.jpg') no-repeat; background-size: auto 100%; -webkit-mask:url('./img/Touch2.png') no-repeat; -webkit-mask-size: 400% 300%; -webkit-mask-position: 0% 0%;}.stage .sprite3{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: url('./img/bg2.jpg') no-repeat; background-size: auto 100%; -webkit-mask:url('./img/Touch3.png') no-repeat; -webkit-mask-size: 400% 300%; -webkit-mask-position: 0% 0%;}.stage .sprite4{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: url('./img/bg2.jpg') no-repeat; background-size: auto 100%; -webkit-mask:url('./img/Touch4.png') no-repeat; /* Touch4是4*5 */ -webkit-mask-size: 400% 500%; -webkit-mask-position: 0% 0%;}......<div class="stage"> <div class="sprite1"></div> <div class="sprite2"></div> <div class="sprite3"></div> <div class="sprite4"></div></div>.....//新建4個spritevar sprite1 = document.querySelector('.sprite1');var sprite2 = document.querySelector('.sprite2');var sprite3 = document.querySelector('.sprite3');var sprite4 = document.querySelector('.sprite4');var sp1 = new spriteClip(sprite1,4,3,80);var sp2 = new spriteClip(sprite2,4,3,80);var sp3 = new spriteClip(sprite3,4,3,80);var sp4 = new spriteClip(sprite4,4,5,80);sp1.hide();sp2.hide();sp3.hide();sp4.hide();document.addEventListener('touchend',function(){ sp1.run();});document.addEventListener('click',function(){ sp1.run();});sp1.finish(function(){ //sprite1結(jié)束后運行sprite2 sp2.run();});sp2.finish(function(){ //sprite2結(jié)束后運行sprite3 sp3.run();});sp3.finish(function(){ //sprite3結(jié)束后運行sprite4 sp4.run();})...... 運行代碼：
立即學習“前端免費學習筆記（深入）”；
查看所有代碼請去Github
如有問題或者建議請微博@UED天機。我會及時回復，也可以提供其他特效一起討論其實現(xiàn)方法。
HTML怎么學習？HTML怎么入門？HTML在哪學？HTML怎么學才快？不用擔心，這里為大家提供了HTML速學教程(入門課程)，有需要的小伙伴保存下載就能學習啦！
廣告
![ThinkPHP5快速開發(fā)企業(yè)站點[全程實錄]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
微信掃碼
關(guān)注PHP中文網(wǎng)服務號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
623
