對於一般網頁設計師而言,對CSS的刻板印象只在於樣式設計方面,能讓你更容易設計出具有吸引力的網頁,但事實上,他的能力比你想像中還來得複雜,用CSS一樣可以做出豔麗的效果,例如純動畫及互動元件,當然,如果搭配HTML、Javascript,又能激發更多的創意變化。

瀏覽器就像是一個空白的畫布,最重要的還是你能不能運用靈感,在這張畫布上發揮你的創意,在這裡,將介紹18個使用CSS來打造的創意作品,從最簡單的字體到動畫 ,相信都能讓你對CSS有所改觀。

小小兵 華麗板

如果你無法抵抗小小兵的熱潮,看到Amr Zakaria 使用純CSS作出來的小小兵動畫,可能會讓你情緒瞬間瘋狂激動起來。 冷靜一下,看動畫前請小心慎入~

連結:Minions in pure CSS

18 的鬼斧神工之作! 用CSS打造出的小小兵,你看出來了嗎?

辛普森家族

Chris Pattle打造的辛普森整個家族大頭貼動畫,將他們的表情及特色都描述的相當出神,甚至能從畫面感受到這些人物的呼吸。

連結:The Simpsons in CSS~

辛普森 驚豔的CSS之作

Long~貓

首先,你會看到一隻可愛、聽著音樂在扭動身體的貓咪,你可以試著調整瀏覽器的寬度,貓的身體將會隨著瀏覽器寬度而彈性的變化,從窄跟長寬度,你發現到一些可愛的動畫設計了嗎?

Long Cat

long cat css

CSS 表情符號

bennettfeely 作了一個類似表情符號產生器的功能,讓使用者可以根據喜好來選擇眼睛、鬍子、嘴巴、牙齒等效果,然後就能夠產生具有獨特個性的CSS小人物瞜。可以去玩看看。當然別忘了同時欣賞一下這件CSS作品 CSS Creatures

起司

嗯~ 對. 就只是一張起司圖,但你別忘了這個三D起司畫面是用純CSS畫出來的~ 連結: Hugo Giraduel - Cheese

起司 Cheese CSS

維京人盾牌

由 LukyVj 作出來的盾牌,會讓人很難分辨就竟是使用CSS還是用影像編輯軟體作出來的~

Viking Shield

維京人盾牌 驚豔的CSS效果

透平的icon及液態移動的選單目錄效果

使用滑鼠在選單上移動,試著感受流暢的動態及具有特色設計風格,其中最特別的就是透明的icon標誌。

Fluid menu with transparent icon

網格動畫效果

一般來說,想要設計出動畫都是具有一定的困難度,因此更不用說這是用純CSS作出來的網格相片牆~

Grid Animation Effects

用CSS+單一元素 設計出一個人物

雖然畫面上看起來沒有太大的驚喜,但是如果你是瘋狂的CSS粉,Hugo Giraudel的作法反而會引起你的興趣,他只使用了一個元素,就打造出了8 bit的人物圖像,有興趣的人可以研究看看~

Single Element CSS character

CSS

搖滾可樂

這也是一個滿有去的作品,當你左右移動,慢慢的他就會看起來很像在旋轉,也是一個用純CSS作出來的作品~ (如果用chrome看不出滾動效果的話,可以試看看其他瀏覽器)

Rolling coke Can

搖滾可樂

計算機

一個使用CSS+Javascript打造的計算機。畫面看起來平易近人~

Calculator 計算機 CSS

calculator

蘋果 iOS7 按鈕~

由Dan Eden 經由iOS7啟發而設計出來的CSS3 按鈕,你可以試著去體驗,看看有沒有熟悉的感覺~

Smooth iOS 7 toogle

霓虹燈

這個例子運用CSS來實現霓虹燈的標示效果,讓人感覺很真實,你可以試著移動滑鼠到圖案上面,霓虹燈上的字母將會有一些互動的效果喔。

連結:Broken neon sign 霓虹燈 驚豔的CSS效果

動態勾選按鈕

Sascha Michael Trinkaus 使用漸層的方式設計出具有時尚高質感的按鈕,並且,點擊後會有出色的互動特效~

Animated checkmark button

小小兵 簡易版

這是另一個小小兵的作品,畫面都是使用CSS的方式來建構,當然,他沒有附加任何的效果,但是應該能感受到能用CSS調製出相當出色的作品時,會讓人感受更加特別,

Minion

SVG選單效果

一個運用SVG設計出的平滑選單按鈕效果 Menu toogle SVG animation

CSS遮罩效果

通常,設計遮罩效果都會搭配javascript來完成,但這個範例則是使用純CSS來作到同樣的動作~

Shape masking

Loader 效果

這裡有許多可以應用在網頁loading畫面的效果,都是使用CSS來完成的~ 效果及動畫設計也都相當細膩

Single Element CSS Spinners & Loaders

參考連結: hongkiat 18 Cool Things You Won’t Believe Were Built Using CSS