今天我們展示如何用CSS遮罩創(chuàng)建一個有趣又簡單但吸引人的過渡效果。與裁剪一樣，遮罩是另外一種定義可見性和元素組合的方式。在下面的教程中，我們將向你展示如何應(yīng)用新屬性實現(xiàn)現(xiàn)代轉(zhuǎn)換效果。我們將使用steps()和位于圖片之上的PNG實現(xiàn)一個有趣的過渡效果。steps()是一個timing function，允許我們將動畫或者過渡分割成段，而不是從一種狀態(tài)持續(xù)到另一種狀態(tài)的過渡。這個函數(shù)有兩個參數(shù)，第一個參數(shù)是一個正值，指定我們希望動畫分割的段數(shù)。
注意: 該效果是高度試驗性的，只被一些現(xiàn)代瀏覽器支持（Chrome、Safari、Opera）。
CSS Masks（CSS遮罩）
使用選定圖像作為遮罩，用于顯示元素的一部分的方法
W3C的候選推薦
支持以下版本：
Desktop
Mobile / Tablet
支持情況:
注意Firefox只是部分支持（它只支持內(nèi)嵌的SVG遮罩元素），所以我們只能退一步希望所有的現(xiàn)代瀏覽器都盡快的提供支持。我們可以使用Modernizr來檢查瀏覽器的支持情況。
創(chuàng)建遮罩圖像
要實現(xiàn)遮罩過渡效果，我們需要一個圖像來隱藏/顯示我們底層圖像的某些部分。該遮罩圖像是具有透明部分的PNG圖像。它自身應(yīng)該是一個sprite image看起來像下面這樣：
黑色部分顯示當(dāng)前圖片，同時白色部分（透明部分）作為當(dāng)前圖像的遮罩，顯示第二張圖片。
為了創(chuàng)建sprite image，我們將視頻導(dǎo)入到Adobe After Effects以減少視頻的時間，移除白色部分并導(dǎo)出為PNG序列。為了將持續(xù)時間減為1.4秒（過渡時常），我們將使用Time strech效果。
要刪除白色部分，我們將使用 extract鍵 設(shè)置白點到0。在下面的截圖中，藍(lán)色部分是背景是視頻的透明部分。
最后，我們將其存儲為PNG序列，然后使用Photoshop 或類似的圖像處理軟件將它生成了一個單一的圖像。
我們將創(chuàng)建另一個“反向”sprite image，以產(chǎn)生相反的效果。你可以在演示文件的img文件夾中找到的所有的sprite image。
現(xiàn)在，我們已經(jīng)創(chuàng)建了遮罩圖像，讓我們深入到這個變換示例的HTML結(jié)構(gòu)中吧。
HTML
在這個例子中，創(chuàng)建一個簡單的輪播圖幻燈片來展示遮罩效果。輪播圖將全屏顯示，我們添加一些箭頭用于觸發(fā)幻燈片的過渡切換。思路是將要展示的幻燈片圖像進(jìn)行疊加，在每次過渡動畫結(jié)束的時候，通過改變它們的z-index來切換。
下面是輪播圖的HTML結(jié)構(gòu)：
<div class="page-view"> <div class="project"> <div class="text"> <h1>“All good things are <br> wild & free”</h1> <p>Photo by Andreas Rønningen</p> </div> </div> <div class="project"> <div class="text"> <h1>“Into the wild”</h1> <p>Photo by John Price</p> </div> </div> <div class="project"> <div class="text"> <h1>“Is spring coming?”</h1> <p>Photo by Thomas Lefebvre</p> </div> </div> <div class="project"> <div class="text"> <h1>“Stay curious”</h1> <p>Photo by Maria</p> </div> </div> <nav class="arrows"> <div class="arrow previous"> <svg viewBox="208.3 352 4.2 6.4"> <polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/> </svg> </div> <div class="arrow next"> <svg viewBox="208.3 352 4.2 6.4"> <polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/> </svg> </div> </nav></div>
<div>作為整個容器，<div>是我們創(chuàng)建的幻燈片的各個部分，每一部分都包換了一個圖片標(biāo)題和圖片說明。另外，每張幻燈片都設(shè)置了一張單獨的背景圖。其中的箭頭部分用于觸發(fā)下一張或者是上一張幻燈片。
The CSS
我們設(shè)置了一個傳統(tǒng)的全屏輪播圖布局，中心放置標(biāo)題，左下角放置頁面導(dǎo)航。此外定義了@media 查詢以適應(yīng)移動設(shè)備的樣式。另外將sprite images設(shè)置為容器中不可見的背景，這樣做是為了在打開網(wǎng)頁的時候確保sprite images開始加載。
.demo-1 { background: url(../img/nature-sprite.png) no-repeat -9999px -9999px; background-size: 0;} .demo-1 .page-view { background: url(../img/nature-sprite-2.png) no-repeat -9999px -9999px; background-size: 0;}每一張幻燈片都有不同的background-image:
.demo-1 .page-view .project:nth-child(1) { background-image: url(../img/nature-1.jpg);} .demo-1 .page-view .project:nth-child(2) { background-image: url(../img/nature-2.jpg);} .demo-1 .page-view .project:nth-child(3) { background-image: url(../img/nature-3.jpg);} .demo-1 .page-view .project:nth-child(4) { background-image: url(../img/nature-4.jpg);}這部分可以用代碼動態(tài)實現(xiàn)，但我們更關(guān)心切換的過渡效果，這里這樣寫就比較簡單。
定義一個名叫hide的class，當(dāng)需要隱藏某張幻燈片的時候，將這個class添加上去。這個class定義了用于遮罩的sprite image。
每一幀是100%全屏展示，我們的動畫包含23張圖像，需要將寬度設(shè)置為23×100%＝2300%。使用CSS3 animation的steps方式過渡，添加CSS動畫。我們想讓sprite停在最后一幀的開頭。要做到這一點，需要的步數(shù)比總數(shù)少一步，也就是22步：
.demo-1 .page-view .project:nth-child(even).hide { -webkit-mask: url(../img/nature-sprite.png); mask: url(../img/nature-sprite.png); -webkit-mask-size: 2300% 100%; mask-size: 2300% 100%; -webkit-animation: mask-play 1.4s steps(22) forwards; animation: mask-play 1.4s steps(22) forwards;} .demo-1 .page-view .project:nth-child(odd).hide { -webkit-mask: url(../img/nature-sprite-2.png); mask: url(../img/nature-sprite-2.png); -webkit-mask-size: 7100% 100%; mask-size: 7100% 100%; -webkit-animation: mask-play 1.4s steps(70) forwards; animation: mask-play 1.4s steps(70) forwards;}最后定義動畫的關(guān)鍵幀:
@-webkit-keyframes mask-play { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }} @keyframes mask-play { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }}到這里，我們現(xiàn)在用了具有結(jié)構(gòu)和樣式的幻燈片了，接下來是讓它更加具有實用性!
The JavaScript
在這個例子中用到了 zepto.js ,它是一個非常輕量級的JavaScript 框架類似于jQuery。
最開始是聲明所有的變量，設(shè)置持續(xù)時間和其他需要的元素。接下來初始化事件，獲取當(dāng)前幻燈片和下一張幻燈片，設(shè)置正確的z-index。
function Slider() { // Durations this.durations = { auto: 5000, slide: 1400 }; // DOM this.dom = { wrapper: null, container: null, project: null, current: null, next: null, arrow: null }; // Misc stuff this.length = 0; this.current = 0; this.next = 0; this.isAuto = true; this.working = false; this.dom.wrapper = $('.page-view'); this.dom.project = this.dom.wrapper.find('.project'); this.dom.arrow = this.dom.wrapper.find('.arrow'); this.length = this.dom.project.length; this.init(); this.events(); this.auto = setInterval(this.updateNext.bind(this), this.durations.auto);}/** * Set initial z-indexes & get current project */Slider.prototype.init = function () { this.dom.project.css('z-index', 10); this.dom.current = $(this.dom.project[this.current]); this.dom.next = $(this.dom.project[this.current + 1]); this.dom.current.css('z-index', 30); this.dom.next.css('z-index', 20);};監(jiān)聽箭頭的點擊事件，如果幻燈片現(xiàn)在沒有處于動畫過程中，檢測點擊的是上一張還是下一張箭頭。如果點擊了下一張箭頭，更改相關(guān)變量的值并開始漸變動畫。
/** * Initialize events */Slider.prototype.events = function () { var self = this; this.dom.arrow.on('click', function () { if (self.working) return; self.processBtn($(this)); });};Slider.prototype.processBtn = function (btn) { if (this.isAuto) { this.isAuto = false; clearInterval(this.auto); } if (btn.hasClass('next')) this.updateNext(); if (btn.hasClass('previous')) this.updatePrevious();};/** * Update next global index */Slider.prototype.updateNext = function () { this.next = (this.current + 1) % this.length; this.process();};/** * Update next global index */Slider.prototype.updatePrevious = function () { this.next--; if (this.next < 0) this.next = this.length - 1; this.process();};這個函數(shù)是這個demo的核心函數(shù)，當(dāng)我們設(shè)置當(dāng)前播放的這張幻燈片的class為hide時，動畫一旦結(jié)束。將上一張幻燈片的z-index減小，增加當(dāng)前幻燈片的z-index值，并移除上一張幻燈片的hide class。
/** * Process, calculate and switch between slides */Slider.prototype.process = function () { var self = this; this.working = true; this.dom.next = $(this.dom.project[this.next]); this.dom.current.css('z-index', 30); self.dom.next.css('z-index', 20); // Hide current this.dom.current.addClass('hide'); setTimeout(function () { self.dom.current.css('z-index', 10); self.dom.next.css('z-index', 30); self.dom.current.removeClass('hide'); self.dom.current = self.dom.next; self.current = self.next; self.working = false; }, this.durations.slide);};添加相應(yīng)的class觸發(fā)動畫，進(jìn)而將遮罩圖像應(yīng)用到幻燈片中。其主要思想是step animation過程中移動遮罩，以創(chuàng)建過渡流。
英文原文：Transition Effect with CSS Masks
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
