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

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

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

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

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

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

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

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

 
Sam Chahine巧妙地講故事
 
動畫是徽標(biāo)中的一大時尚，但有時可能有點(diǎn)過頭了。這個例子之所以如此出色，是因?yàn)殚_篇動畫是對品牌的贊美，但又不過分。