為設(shè)計(jì)師和前端量身打造，200個(gè)動(dòng)畫圖標(biāo)，讓你的網(wǎng)頁更具活力

紹

titanic是在Github上開源的一組免費(fèi)的動(dòng)畫圖標(biāo)，可以將其簡單的運(yùn)用到網(wǎng)頁中，而且代碼及其簡單，但是動(dòng)畫效果卻很不錯(cuò)，動(dòng)畫圖標(biāo)和靜態(tài)圖標(biāo)的不同之處在于它可以讓你的網(wǎng)頁更加富有活力，讓產(chǎn)品更加具備視覺吸引力，一起來看看！

開源首頁

https://github.com/icons8/titanic

如何安裝使用？

安裝使用及其簡單，可以通過CDN或npm安裝它：

npm install titanic-icons --save

將代碼引入你網(wǎng)頁的head中后：

<script src="/dist/js/titanic.min.js"></script>
<script src="/bodymovin/4.5.9/bodymovin.min.js"></script>

在body中初始化：

<script>
 var titanic = new Titanic();
</script>

這樣，你就可以在HTML中使用任意位置以下標(biāo)簽添加圖標(biāo)：

<div class='titanic titanic-chat'></div>

chat可以是以下任一一種：

caps
chat
checkbox
expand
cheap
expensive
idea
mailbox
mic
no-mic
online
pause
power
shopping
smile
stop
unlock
zoom

API

1、titanic.isInitialized（）

判斷是否初始化成功

2、titanic.items

獲取titanic集合

3、titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()

按索引播放titanic的動(dòng)畫

4、titanic.on(token), titanic.off(token), titanic.play(token)

通過名稱播放泰坦尼克號(hào)物品的動(dòng)畫

5、以下是一個(gè)完成的示例：

<head>
 <!--Inserting the scripts once for the whole page-->
 <script src="/dist/js/titanic.min.js"></script>
 <script src="/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
 <!--Inserting an icon-->
 <div class='titanic titanic-checkbox'></div>
 <!--Initializing-->
 <script>
 var titanic = new Titanic({
 hover: true, // auto animated on hover (default true)
 click: true // auto animated on click/tap (default false)
 });
 </script>
 <!--Clicking turns this icon on-->
 <button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>

都有哪些動(dòng)畫圖標(biāo)?

通過截圖大致了解，可以直接訪問官方網(wǎng)站查看動(dòng)畫效果：

每個(gè)人都喜歡個(gè)性鮮明的頁面。通過200個(gè)動(dòng)畫圖標(biāo)包，使Web和移動(dòng)用戶界面更具視覺吸引力。

總結(jié)

titanic是一組豐富的動(dòng)畫圖標(biāo)，可以讓你的網(wǎng)頁極具視覺吸引力，是設(shè)計(jì)師和前端工程師的不二之選，感興趣的可以嘗試！

PS:你可以直接從官網(wǎng)或者Github獲取，當(dāng)然也可以私信本頭條號(hào)關(guān)鍵字：“icons”，Enjoy it!

天我們來復(fù)盤一下前端中css偽元素的知識(shí)以及如何用css偽元素來減輕javascript的壓力，做出一些腦洞大開的圖形。

預(yù)備知識(shí)

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

偽元素

偽元素是一個(gè)附加至選擇器末的關(guān)鍵詞，允許你對被選擇元素的特定部分修改樣式。偽元素主要有：

::first-letter 第一個(gè)字母的樣式
::first-line 首行文字的樣式
::before 元素頭部添加的修飾
::after 元素尾部添加的修飾
::placeholder input的占位符樣式
::selection 被選中元素的樣式

我個(gè)人覺得偽元素可以解釋為元素的修飾，可以為元素帶來額外的附加樣式，屬于額外的文檔結(jié)構(gòu)。

偽類

用來表示無法在CSS中輕松或者可靠檢測到的某個(gè)元素的狀態(tài)或?qū)傩裕热鏰標(biāo)簽的hover表示鼠標(biāo)經(jīng)過的樣式，visited表示訪問過的鏈接的樣式，更多的用來描述元素狀態(tài)變化時(shí)的樣式，偽類主要有：

:link
:visited
:hover
:active
:focus
:lang(fr)
:not(s)
:root
:first-child
:last-child
:only-child
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:empty
:checked
:enabled
:disabled
:target

我們利用css偽類和偽元素可以實(shí)現(xiàn)很多強(qiáng)大的視覺效果，這里我主要介紹偽元素，如果對偽類或其他css特性感興趣，可以看看我之前的css文章，寫的很全面。

正文

先看看我們用純css實(shí)現(xiàn)的圖標(biāo)庫：

當(dāng)然，如果我們知道了做出如上圖標(biāo)的css原理，那么我們就可以實(shí)現(xiàn)更加豐富復(fù)雜的圖形，甚至可以打造自己的圖標(biāo)庫。接下來我會(huì)介紹實(shí)現(xiàn)如上圖標(biāo)的方式和方法，并給出部分源碼，方便大家學(xué)習(xí)。

原理

我們實(shí)現(xiàn)如上css圖標(biāo)是基于偽元素的，可以利用偽元素的::before和::after和content屬性來為元素添加額外視覺效果，我們在上文中也介紹了偽元素的概念和類型，接下來讓我們來實(shí)現(xiàn)它吧～

實(shí)現(xiàn)箭頭

思路其實(shí)就是利用元素的::before偽元素畫一個(gè)三角形，用css設(shè)置span樣式為一條線并進(jìn)行布局定位：

// less
.arrow {
 position: relative;
 display: inline-block;
 line-height: 0;
 background-color: #ccc;
 &.arrow-hor {
 width: 16px;
 height: 1px;
 }
 &.arrow-hor.right::before {
 content: '';
 position: absolute;
 top: -4px;
 right: -8px;
 border: 4px solid transparent;
 border-left: 4px solid #ccc;
 }
}
// html
<span class="arrow arrow-hor right"></span>

這樣就實(shí)現(xiàn)了一個(gè)指向右的箭頭，我們用類似的方法也可以實(shí)現(xiàn)左箭頭，上下箭頭，實(shí)現(xiàn)雙向箭頭只需要加一個(gè)::after偽類并做適當(dāng)定位就好了。

實(shí)現(xiàn)搜索圖標(biāo)

實(shí)現(xiàn)搜索圖標(biāo)實(shí)際上只需要一個(gè)圓和一根線，然后我們會(huì)用transform：ratate來實(shí)現(xiàn)角度傾斜，具體實(shí)現(xiàn)如下：

// less
.search {
 position: relative;
 display: inline-block;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 border: 1px solid #ccc;
 text-align: center;
 transform: rotate(-45deg);
 &::after {
 content: '';
 display: inline-block;
 width: 1px;
 height: 4px;
 background-color: #ccc;
 }
}
// html
<span class="search"></span>

實(shí)現(xiàn)頭像

實(shí)現(xiàn)頭像我們要利用before和after偽元素，分別做人物頭部和身體，身體我們會(huì)用css畫一個(gè)橢圓來做：

// less
.dot-pan {
 position: relative;
 display: inline-flex;
 width: 60px;
 height: 60px;
 line-height: 0;
 align-items: center;
 border-radius: 50%;
 background-color: #06c;
 transform: rotate(-90deg);
 &::before {
 content: '';
 display: inline-block;
 width: 28px;
 height: 40px;
 margin-left: -3px;
 border-radius: 50% 50%;
 flex-shrink: 0;
 background-color: #fff;
 }
 &::after {
 content: '';
 display: inline-block;
 width: 20px;
 height: 20px;
 flex-shrink: 0;
 border-radius: 50%;
 background-color: #fff;
 }
}
// html
<span class="search"></span>

實(shí)現(xiàn)地點(diǎn)圖標(biāo)

地點(diǎn)圖標(biāo)由一個(gè)圓和一個(gè)三角形組成，如果要做的精致一點(diǎn)，我們可以再用一個(gè)偽元素來做一個(gè)定點(diǎn)：

// less
.locate-icon {
 position: relative;
 display: inline-block;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color: #06c;
 &::before {
 content: '';
 position: absolute;
 display: inline-block;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 background-color: #fff;
 }
 &::after {
 content: '';
 margin-top: 45px;
 display: inline-block;
 border: 15px solid transparent;
 border-top-color: #06c;
 }
}
// html
<span class="locate-icon mr-20"></span>

實(shí)現(xiàn)微信圖標(biāo)

圖中2個(gè)眼睛主要是用到一個(gè)偽元素加上box-shadow來實(shí)現(xiàn)，這樣可以節(jié)約一個(gè)偽元素用來做小尾巴，至于如何實(shí)現(xiàn)不同形狀的三角形，如果有不懂的可以和我交流，具體實(shí)現(xiàn)如下：

// less
.wechat-icon {
 display: inline-block;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color: rgb(68, 170, 59);
 &::before {
 content: '';
 margin-top: 14px;
 position: absolute;
 width: 4px;
 height: 4px;
 border-radius: 50%;
 background-color: #fff;
 box-shadow: 16px 0 0 #fff;
 }
 &::after {
 content: '';
 margin-top: 42px;
 display: inline-block;
 border-width: 6px 10px 6px 10px;
 border-style: solid;
 border-color: transparent;
 border-top-color: rgb(68, 170, 59);
 transform: rotate(-147deg);
 }
}
// html
<span class="wechat-icon mr-20"></span>

實(shí)現(xiàn)對勾圖標(biāo)

這里也很簡單，我們用偽元素的content里放置一個(gè)勾號(hào)，然后設(shè)置顏色大小就好啦：

// less
.yes-icon {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 48px;
 height: 48px;
 background-color: green;
 border-radius: 50%;
 &::after {
 content: '?';
 color: #fff;
 font-size: 30px;
 font-weight: bold;
 }
}
// html
<span class="yes-icon mr-20"></span>

實(shí)現(xiàn)眼睛（一般用于網(wǎng)站訪問量圖標(biāo)）

主要是做橢圓加上一個(gè)圓形的偽元素：

.view-icon {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 58px;
 height: 36px;
 background-color: #06c;
 border-radius: 50%;
 &::after {
 content: '';
 display: inline-block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: #fff;
 }
}

導(dǎo)航圖標(biāo)

原理類似，主要思想是畫兩個(gè)三較形，用偽元素的三角形遮住主元素底部即可：

.gps-icon {
 position: relative;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 border-width: 30px 15px 30px 15px;
 border-color: transparent;
 border-style: solid;
 border-bottom-color: #06c;
 transform: translate(10px, -16px) rotate(32deg);
 &::after {
 position: absolute;
 bottom: -48px;
 content: '';
 display: inline-block;
 border-width: 10px 38px 30px 38px;
 border-color: transparent;
 border-style: solid;
 border-bottom-color: #fff;
 }
}

實(shí)現(xiàn)心形圖標(biāo)

原理就是用兩個(gè)偽元素實(shí)現(xiàn)兩個(gè)橢圓，旋轉(zhuǎn)重合即可：

.logo-x {
 position: relative;
 display: inline-flex;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color: rgb(212, 73, 17);
 &::after {
 position: absolute;
 content: '';
 left: 10px;
 top: 12px;
 display: inline-block;
 width: 20px;
 height: 30px;
 border-radius: 50%;
 background-color: #fff;
 transform: rotate(135deg);
 }
 &::before {
 position: absolute;
 content: '';
 right: 10px;
 top: 12px;
 display: inline-block;
 width: 20px;
 height: 30px;
 border-radius: 50%;
 background-color: #fff;
 transform: rotate(-135deg);
 }
}

ps圖標(biāo)

這個(gè)也是用偽元素，一個(gè)偽元素用來做文字圖形，一個(gè)用來做遮罩，來形成偽立體感：

.logo-ps {
 position: relative;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 50px;
 height: 50px;
 border-radius: 8px;
 background-color: rgb(15, 102, 184);
 &::before {
 position: absolute;
 content: '';
 display: inline-block;
 width: 50px;
 height: 40px;
 background-color: rgba(255, 255, 255, .1);
 }
 &::after {
 position: absolute;
 content: 'PS';
 font-size: 24px;
 display: inline-block;
 color: #fff;
 }
}

實(shí)現(xiàn)氣泡對話框

和微信圖標(biāo)類似：

.logo-pp {
 display: inline-block;
 width: 150px;
 height: 50px;
 border-radius: 8px;
 background-color: rgb(68, 170, 59);
 &::before {
 content: '等你下課哦！';
 margin-top: 14px;
 margin-left: -33px;
 position: absolute;
 color: #fff;
 }
 &::after {
 content: '';
 margin-top: 42px;
 display: inline-block;
 border-width: 6px 10px 6px 10px;
 border-style: solid;
 border-color: transparent;
 border-top-color: rgb(68, 170, 59);
 transform: rotate(-147deg) translate(-12px, 6px);
 }
}

由于篇幅原因，其他的圖標(biāo)就不一一實(shí)現(xiàn)了，原理都類似，筆者之前曾利用這個(gè)方案做過一套100個(gè)圖標(biāo)的庫，成功應(yīng)用于各個(gè)項(xiàng)目中，由于體積小不會(huì)造成額外請求，所以更加實(shí)用，但更復(fù)雜的圖形就為了方便還是建議用字體圖標(biāo)或者svg，base64等。

來源：https://mp.weixin.qq.com/s/PxP62LlEl0jB7cVAPMjXyg

作者：趣學(xué)前端

、眼見為實(shí)

CSS可以修改圖片的顏色，沒錯(cuò)，可以，眼見為實(shí)！您可以狠狠地點(diǎn)擊這里：png小圖標(biāo)CSS賦色demo

上面的不是很黑的是原始圖標(biāo)，是個(gè)PNG圖片，下面這個(gè)是可以賦色的：

下面，我們隨意選擇一個(gè)顏色，例如紫色，然后：

是不是感覺很厲害！以后設(shè)計(jì)師就不需要在提供幾套顏色的圖片了。

SVG, icon fonts等技術(shù)似乎也不是那么耀眼了。

二、原理其實(shí)很簡單

原理其實(shí)很簡單，使用了CSS3濾鏡filter中的drop-shadow，drop-shadow濾鏡可以給元素或圖片非透明區(qū)域添加投影。

如果對drop-shadow不是很了解，建議先看看前些時(shí)間寫的“CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別應(yīng)用”一文！

對于背景透明的png小圖標(biāo)而言，如果我們施加一個(gè)不帶模糊的投影，不就等同于生成了另外一個(gè)顏色的小圖標(biāo)了嗎？

然后，我們把原始圖標(biāo)隱藏在容器外面，投影圖標(biāo)在容器中間，不見給人感覺是賦色效果了？

比方說本文的demo，如果把icon父級的的overflow:hidden去掉，原始的圖標(biāo)就暴露出來啦！

三、實(shí)現(xiàn)的時(shí)候?qū)嶋H有難度

原理如上面，我一開始實(shí)現(xiàn)的時(shí)候，以為很簡單，因?yàn)榉址昼娍梢詫?shí)現(xiàn)自己的想法，后來發(fā)現(xiàn)有些天真了，Chrome瀏覽器怎么都顯示不出來；FireFox瀏覽器卻可以！咦，究竟發(fā)生了什么。

在Chrome瀏覽器下，drop-shadow有一個(gè)如下的呈現(xiàn)特性：

在Chrome瀏覽器下，如果一個(gè)元素的主體部分，無論以何種方式，只要在頁面中不可見，其drop-shadow是不可見的；實(shí)體部分哪怕有1像素可見，則drop-shadow完全可見。

所以，我試過：

text-indent負(fù)值隱藏原始圖，無投影，失??！
clip剪裁隱藏，無投影，失??！
margin負(fù)值隱藏原始圖，無投影，失敗！
left負(fù)值隱藏原始圖，無投影，失敗！

通通不行，實(shí)現(xiàn)遇到了巨大的阻礙。

后來，靈光一現(xiàn)，如果我實(shí)體部分也在可視區(qū)域內(nèi)，但是是透明的，會(huì)怎樣呢（反正不會(huì)有投影出來）？

于是，我就試了下曾經(jīng)立下無數(shù)戰(zhàn)功的透明邊框，臥槽，又立功了，成了！

因此，下面這一個(gè)CSS聲明是千萬不能少的：

border-right: 20px solid transparent;

四、關(guān)于兼容性

IE13+支持，Chrome和FireFox瀏覽器支持，移動(dòng)端iOS支持，Android4.4+支持。也就是，基本上，移動(dòng)端現(xiàn)在可以使用這種技術(shù)了。

既節(jié)約了流量，也讓我們的開發(fā)更簡單，維護(hù)更方便了。

原文：https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/

在線咨詢

上一篇：金九銀十秋招前端必看的2023年前端高頻面試題匯總（附答案）
下一篇：JavaScript中常用的輸入輸出語句介紹

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

為設(shè)計(jì)師和前端量身打造，200個(gè)動(dòng)畫圖標(biāo)，讓你的網(wǎng)頁更具活力