最近進(jìn)行了大量實(shí)驗(yàn)的一個(gè)領(lǐng)域是利用 CSS 來全面設(shè)計(jì)或增強(qiáng)藝術(shù)作品。例如，設(shè)計(jì)師們曾嘗試重新塑造流行的角色，并取得了令人矚目的成果。
 
同樣，我們還看到一些非常有趣的徽標(biāo)是使用 CSS 創(chuàng)建的，同時(shí)還加入了大量的 JavaScript 和 SVG。它們一起提供了其他格式所沒有的一定程度的靈活性。
 
讓我們來看看十個(gè)使用 CSS、JavaScript 和 SVG 組合構(gòu)建的徽標(biāo)示例。有的是原裝的，有的是知名品牌的：都值得欣賞。
 
Julian Garnier 的動(dòng)畫煙花
 
這個(gè)anime.js標(biāo)志動(dòng)畫使用 CSS 和（當(dāng)然）JS 的組合來創(chuàng)建一個(gè)色彩繽紛的動(dòng)態(tài)動(dòng)畫標(biāo)志。不僅有很酷的介紹動(dòng)畫，而且隨后點(diǎn)擊徽標(biāo)會(huì)釋放更多煙花。這有點(diǎn)讓人上癮。

Hugo Darby-Brown輕松擴(kuò)展
 
將 CSS 用于徽標(biāo)的一個(gè)有趣優(yōu)勢是能夠縮放以匹配任何尺寸——很像 SVG 文件。下面的 Shop Talk 徽標(biāo)示例展示了 CSS 的像素級完美縮放，旁邊是一個(gè)不能完全跟上的 PNG。
 

 
灰鬼手寫
 
這個(gè)例子已經(jīng)存在了一段時(shí)間，但它仍然很漂亮?；諛?biāo)的腳本文本顯示出來，就好像它是在屏幕上手寫的一樣。它簡單但有效。
 

 
由 Marco Barría打開和關(guān)閉
 
雖然這個(gè)白色標(biāo)志在彩色背景上看起來很棒，但這里真正的瑰寶是內(nèi)置的播放/反轉(zhuǎn)功能。點(diǎn)擊“播放”將使標(biāo)志通過光滑的動(dòng)畫出現(xiàn)，而反轉(zhuǎn)（你猜對了）則完成整個(gè)過程向后處理。這在某些情況下很有用，例如，您想要表示元素的關(guān)閉。
 

 
Mike King 的純鉻
 
這是 Chrome 徽標(biāo)的忠實(shí)再現(xiàn)，使用純 CSS 和單個(gè) HTML 元素完成。它顯示了 CSS 在創(chuàng)建無縫外觀和復(fù)雜形狀方面可以完成多少工作。旋轉(zhuǎn)懸停效果也很不錯(cuò)。
 

 
在Nikk Tifan 的聚光燈下
 
將鼠標(biāo)懸停在這支筆中的任何一個(gè)徽標(biāo)上，都會(huì)在光標(biāo)的直接區(qū)域產(chǎn)生“聚光燈”效果。它增加了酷元素并鼓勵(lì)互動(dòng)。
 

 
Cody獨(dú)特的繪圖效果
 
這個(gè)例子在幾個(gè)層面上都很出色。首先，將標(biāo)志從一種技術(shù)圖紙變成成品的動(dòng)畫看起來很有趣。其次，微妙的動(dòng)畫漸變背景完美地襯托了整個(gè)場景。
 

 
Melissa Cabral 設(shè)計(jì)的簡約而有趣的標(biāo)志
 
好吧，極簡和有趣通常不會(huì)一起提到。但在這種情況下 - 它適合。這個(gè)簡單的標(biāo)志在背景中帶有彩虹動(dòng)畫塊，為原本非常平淡的事物增添了個(gè)性。
 

 
Sam Chahine巧妙地講故事
 
動(dòng)畫是徽標(biāo)中的一大時(shí)尚，但有時(shí)可能有點(diǎn)過頭了。這個(gè)例子之所以如此出色，是因?yàn)殚_篇?jiǎng)赢嬍菍ζ放频馁澝?，但又不過分。