網頁時，最讓人煩惱的是自己辛辛苦苦寫出來JAVASCRIPT代碼常常被別人輕易的拷貝，實在讓自己的心里有點不是滋味，要知道自己寫點東西也挺累的。

但我們也應該清楚地認識到因為JAVASCRIPT代碼是在IE中解釋執行，要想絕對的保密是不可能的，我們要做的就是盡可能的增大拷貝者復制的難度，讓他知難而退（但愿如此）。

網上有很多JavaScript加密工具，但是很多都是可以被輕易破解的，下面帖子網給大家介紹一種比較奇葩的加密方式

先看效果圖

具體方法

1.進入網站（文章結尾有說明）

2.把你的js原代碼粘貼進去（先備份文件）

3.復制加密后的代碼到對應的js文件替換原代碼

關注我的頭條號，然后私信我發送：1022 即可獲取網站地址。

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

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

因此，在本文中，我們將構建一個具有不同表達式的面部的簡單動畫，我們將在該過程中學習一點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之后，我們可以這樣做：

這是我們可以用來構建我們幾乎每天遇到的那些扣人心弦的動畫的方法之一。

一個重要的說明

屏蔽屬性可能無法在所有瀏覽器中使用。因此，為了使他們在所有的瀏覽器，只是在前面加上特定瀏覽器標簽一樣工作-webkit- ，-moz-及-0- 。

您可以在github和codepen上查看完整的代碼。

謝謝閱讀！我希望你學到了一些東西。

譯自：https://medium.com/free-code-camp/how-i-built-a-mood-changing-animation-using-css-masks-565b16ed051f