前端的開發過程中，需要用到大量的圖片，當使用這些圖片一段時間后，會發現這個過程是千篇一律的，設計，切圖，適配。當然，許多人也喜歡用字體圖標。時間久了，這很枯燥，作為一個前端，不就是喜歡折騰嗎？不折騰不舒服斯基，那么這次就來嘗試用純css繪制動畫線性icon吧。

當我第一次使用純css線性icon的時候，那感覺就像呼吸到了新鮮空氣一般，它的高可擴展性、易使用、加載速度快的特定給我留下了非常深刻的印象。

線性圖標使用了什么技術呢？

其實很容易猜到，它使用了svg技術。整個開始過程其實是把svg放到一個背景中，然后用一張線性漸變的背景覆蓋在上方，然后使用css的mix-blend-mode的屬性來裁剪、混合。最后線性漸變背景的混合模式設置為mix-blend-mode: screen后，線性漸變會漸漸消失在白色背景上。這就形成了我們的漸變圖標。

下面是具體的代碼實現：

一、編寫背景樣式

背景圖可以是亮的或是暗的，如果是暗背景，那漸變層需要設置mix-blend-mode: multiply，如果背景圖是亮的，那漸變的混合屬性需要設置為mix-blend-mode:screen，下面，我們選擇一個亮的背景：

二、添加線性圖標

<divclass="icon-background"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 50 62"><rectx="19"y="6"width="12"height="4"/><rectx="1"y="38"width="48"height="4"/><linex1="25"y1="1"x2="25"y2="6"/><linex1="25"y1="42"x2="25"y2="58"/><lineclass="cls-1"x1="38"y1="42"x2="44"y2="61"/><linex1="12"y1="42"x2="6"y2="61"/><linex1="8.53"y1="53"x2="41.47"y2="53"/><polygonpoints="3 38 16.75 25.99 24.59 31.99 36.92 20 47 29.82 47 37.98 3 38"/><circlecx="14"cy="18"r="3"/><polygonpoints="31 8 31 10 19 10 19 8 3 8 3 38 47 38 47 8 31 8"/></svg></div>

svg的顏色需要設置為黑色：

svg{ color:#000; position:relative; opacity:.9; width:100%; height:100%; display:block; transition:transform .3s ease;}

三、制作漸變層

該層需要緊跟著icon層，并且需要設置漸變屬性

四、添加動畫效果

該步驟非常簡單，只要使用keyframes并配以旋轉動畫即可。