国产日韩欧美精品在线,精品久久久久久片久久中文慕人妻,里番ACG※优优里番ACG

還記得我們童年時期曾經看過的漫畫嗎？那時他們是動畫的縮影。如今，動畫不僅限于漫畫 - 當我們查看手機或查看任何有屏幕的設備時，我們幾乎每天都會看到動畫。

如今，動畫不僅用于吸引注意力，還用于增強用戶體驗并引導用戶流動。在任何好的設計中，動畫都以這樣的方式添加，即它們與通用流混合，從而創建無縫的用戶體驗。

因此，在本文中，我們將構建一個具有不同表達式的面部的簡單動畫，我們將在該過程中學習一點css。

入門

我們將使用CSS技術，這在Web開發人員中很少見，但設計人員經常使用。它被稱為蒙版。

那么當你聽到“蒙版”時，你會想到什么？

你可能想象一下封面上的東西。這就是我們需要了解的全部內容。

等等 - 但這篇文章與編碼和使用CSS動畫有關...

別擔心！我們會做對的。

創建基本掩碼

假設我們有一個 <div>，background: green;它看起來像這樣：

現在，說我有一個face.svg：

如果我們mask-image: url(face.svg);在其上應用CSS屬性<div>，您會驚訝地看到我們得到的內容：

你可能會認為這里的事情很奇怪。將face.svg被放置在<div>，但它占去了的顏色background。這與您的預期相反。發生這種情況是因為mask-type使svg的不透明部分透明的屬性。這允許背景顏色可見。

我們現在不要深入研究。請記住，我們可以background-color用來改變面具的顏色。如果您熟悉不同的使用方法background-color，我們也可以使用漸變并編寫一個簡單的漸變，在中心填充紅色并徑向向外擴展為黑色。代碼如下：

background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));

結果如下：

添加動畫

現在讓我們為這張空臉添加一些動畫。為此，我expression.svg看起來像下面的圖像。為簡單起見，我創建了具有相同寬度和高度的所有svgs，以便我們避免手動對齊面和表達式。

image.png

現在mask-image有了這個很酷的選項，允許多個圖像用作蒙版。所以我們可以這樣做：mask-image: url(face.svg), url(expression.svg);。這就是我們現在擁有的：

image.png

CSS蒙版最重要的屬性之一是mask-position將蒙版從左上角相對于其父對象定位。我可以使用屬性定位多個口罩mask-position只是喜歡mask-image。

所以為了讓臉色難過，我們可以使用這樣的東西：mask-position: 0 0, 0 12px;。結果如下：

所述第一位置0 0是為face.svg，第二0 12px對expression.svg。這將它從上方推出12px并導致上述表達式。

應用功能

現在讓我們在懸停時動畫這些表達式。因此，應用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之后，我們可以這樣做：