還記得我們童年時期曾經(jīng)看過的漫畫嗎？那時他們是動畫的縮影。如今，動畫不僅限于漫畫 - 當(dāng)我們查看手機(jī)或查看任何有屏幕的設(shè)備時，我們幾乎每天都會看到動畫。
如今，動畫不僅用于吸引注意力，還用于增強(qiáng)用戶體驗并引導(dǎo)用戶流動。在任何好的設(shè)計中，動畫都以這樣的方式添加，即它們與通用流混合，從而創(chuàng)建無縫的用戶體驗。
因此，在本文中，我們將構(gòu)建一個具有不同表達(dá)式的面部的簡單動畫，我們將在該過程中學(xué)習(xí)一點css。
入門
我們將使用CSS技術(shù)，這在Web開發(fā)人員中很少見，但設(shè)計人員經(jīng)常使用。它被稱為蒙版。
那么當(dāng)你聽到“蒙版”時，你會想到什么？
你可能想象一下封面上的東西。這就是我們需要了解的全部內(nèi)容。
等等 - 但這篇文章與編碼和使用CSS動畫有關(guān)...
別擔(dān)心！我們會做對的。
創(chuàng)建基本掩碼
假設(shè)我們有一個 <div>，background: green;它看起來像這樣：
現(xiàn)在，說我有一個face.svg：
如果我們mask-image: url(face.svg);在其上應(yīng)用CSS屬性<div>，您會驚訝地看到我們得到的內(nèi)容：
你可能會認(rèn)為這里的事情很奇怪。將face.svg被放置在<div>，但它占去了的顏色background。這與您的預(yù)期相反。發(fā)生這種情況是因為mask-type使svg的不透明部分透明的屬性。這允許背景顏色可見。
我們現(xiàn)在不要深入研究。請記住，我們可以background-color用來改變面具的顏色。如果您熟悉不同的使用方法background-color，我們也可以使用漸變并編寫一個簡單的漸變，在中心填充紅色并徑向向外擴(kuò)展為黑色。代碼如下：
background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));
結(jié)果如下：
添加動畫
現(xiàn)在讓我們?yōu)檫@張空臉添加一些動畫。為此，我expression.svg看起來像下面的圖像。為簡單起見，我創(chuàng)建了具有相同寬度和高度的所有svgs，以便我們避免手動對齊面和表達(dá)式。
image.png
現(xiàn)在mask-image有了這個很酷的選項，允許多個圖像用作蒙版。所以我們可以這樣做：mask-image: url(face.svg), url(expression.svg);。這就是我們現(xiàn)在擁有的：
image.png
CSS蒙版最重要的屬性之一是mask-position將蒙版從左上角相對于其父對象定位。我可以使用屬性定位多個口罩mask-position只是喜歡mask-image。
所以為了讓臉色難過，我們可以使用這樣的東西：mask-position: 0 0, 0 12px;。結(jié)果如下：
所述第一位置0 0是為face.svg，第二0 12px對expression.svg。這將它從上方推出12px并導(dǎo)致上述表達(dá)式。
應(yīng)用功能
現(xiàn)在讓我們在懸停時動畫這些表達(dá)式。因此，應(yīng)用hover偽類后得到的完整代碼如下：
i {
background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1));
mask-image: url('face.svg'), url('expression.svg');
mask-position: 0 0, 0 12px; /* To make the sad expression */
transition: mask-position .5s ease-out;
}
i:hover {
background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1));
mask-position: 0 0, 0 0; /* To make the hAppy expression */
transition: mask-position .1s linear;
}
在使用CSS之后，我們可以這樣做：
這是我們可以用來構(gòu)建我們幾乎每天遇到的那些扣人心弦的動畫的方法之一。
一個重要的說明
屏蔽屬性可能無法在所有瀏覽器中使用。因此，為了使他們在所有的瀏覽器，只是在前面加上特定瀏覽器標(biāo)簽一樣工作-webkit- ，-moz-及-0- 。
您可以在github和codepen上查看完整的代碼。
謝謝閱讀！我希望你學(xué)到了一些東西。
譯自：https://medium.com/free-code-camp/how-i-built-a-mood-changing-animation-using-css-masks-565b16ed051f
