10 個完全使用 HTML 和 CSS 創建的角色設計

我總是對你可以用 CSS 做多少感到驚訝。 Web 開發人員知道 CSS 可以讓您構建一些令人難以置信的頁面佈局和自定義動畫效果。

但是您也可以將它用於許多有趣的項目。 例如，僅使用 CSS 構建角色設計。 聽起來很奇怪吧？

那麼它肯定是。 我收集了一些最奇怪（但最酷）的角色設計，全部由 100% 純 HTML 和 CSS 代碼製成。

1. 憤怒的小鳥

誰不喜歡憤怒的小鳥？ 他們從遊戲開始，在刺破流行文化後以某種方式獲得了自己的電影。

Rachel Bull 的這支筆證明了憤怒的小鳥甚至可以進入 CSS。

具有諷刺意味的是，此頁面上有一個圖像，它用於在最頂部嵌入自定義類型。 從這些鳥的曲線到自定義漸變的所有其他元素都在純 CSS 上運行。

也許不是最實用的代碼片段，但肯定是一個靈感。

2.科學怪人

瑪麗雪萊的科學怪人被廣泛稱為複活的綠皮生物。 雖然它在技術上是弗蘭肯斯坦的怪物，但它並沒有很好地從舌頭上滾下來。

雖然這個弗蘭肯斯坦生物的名字可能有點錯誤，但它仍然是我見過的最好的角色設計之一。

它只適用於 40 行 HTML，開發人員 Victoria Ninni Bergquist 甚至添加了一些 CSS 來幫助怪物眨眼。 挺整潔的！

3. 玩具總動員外星人

皮克斯的玩具總動員有這麼多令人難忘的角色，這些古怪的外星人肯定是演員陣容的一部分。

Sunyoung Park 構建了這支筆作為 CSS 的演示並測試前端編碼的邊界。 它應該在所有主要瀏覽器甚至一些較舊的瀏覽器中正確呈現。 儘管它確實在很大程度上依賴於 rotate() 屬性。

幸運的是，這是 CSS 轉換功能的一部分，支持可追溯到 IE9+ 的瀏覽器。 所以這個綠色的小外星人可以讓大多數互聯網連接的世界感到高興。

4.阿庫阿庫

如果您有 PlayStation，那麼您可能知道 Crash Bandicoot。 好吧，這個名叫 Aku Aku 的瘋子是面具……生物……東西的完美復製品。

每個元素都有自己的 div，並帶有定義該特徵的相關類（即眼睛、鼻唇）。

我想說整個設計中最難的部分是他頭上的羽毛冠。 再加上很酷的動畫，可能會鼓勵遊戲玩家拿起他們的舊 Crash 遊戲。

5. 小松鼠

這是動畫與 CSS 角色設計相結合的另一個很好的例子。

Josh Bader 使用純 CSS 和 15 行 HTML 編寫了這個 Squirtle 字符。 感人的！

為了獲得行走效果，Josh 將:after偽類附加到每個元素上，並帶有重複動畫。 一旦你深入了解，這是一個令人驚訝的簡單壯舉，更令人驚訝的是，構建這樣的角色需要這麼少的代碼。

6. 沒有莫蒂的瑞克

在這支筆中，您會發現開發人員 James Gilmore 的古怪作品，他用純 CSS 製作了一個赤壁的 Rick。

該設計實際上使用了一些漂亮的 CSS 陰影來創建深度並賦予這個角色一些生命。 更不用說與設計完美融合的重複動畫了。

請注意，這也可以在 Sass 上運行，如果您想修改它，代碼中有自定義變量。 它的格式非常好，所以這將是學習 Sass 的一個很棒的片段。

7.布賴恩格里芬

這是 Rachel Bull 的另一個角色設計，這個角色是 Family Guy 的 Brian Griffin。

令人驚訝的是，僅使用純 CSS 就能獲得如此多的細節。 Brian 的整個風格與節目的藝術風格非常匹配，並且它使用了令人難以置信的逼真的陰影。

雖然這個技術非常好，有超過 150 多行的 CSS，而且它使用 Compass 庫來引導。

8. 埃米特

來自樂高電影中的埃米特是他所有的榮耀。 Rachel 再次使用 CSS 和 Haml 從頭構建了這個片段，這是編寫現代 HTML 的簡化方法。

其中一些元素在 CSS 上運行時確實令人印象深刻。 值得注意的是，頭髮漩渦看起來真的像塑料樂高積木。 瘋了，這甚至是可能的！

CSS 中有很多很棒的 Sass 邏輯，如果你是一個開發書呆子，你會喜歡在這支筆周圍摸索。 代碼和結果都很棒。

9. CSS 伊布

圍繞 Pokemon Go 現象構建的是由 David Khourshid 製作的純 CSS Eevee。

它使用與應用程序相似的背景和頁面樣式，同時用純 CSS 重新創建整個 Pokemon。 通過一些紋理和一些智能分層，David 使這款 Eevee 看起來實際上是 3D 的！

動畫也很不錯，它們使整個事情感覺更真實。 無論您是口袋妖怪的粉絲還是從未接觸過這款遊戲，您都必須承認這是一項出色的工作。

10. 米老鼠

雖然這個米老鼠頭有點簡單，但它也是一項壯舉。 你可能認為它更容易管理，因為它是靜態的，但是筆推動了 450 多行Sass。

最具技術性的部分是按順序排列所有形狀並重新排列元素以正確對齊彼此。

然而結果非常棒，你可以看到與早期米奇卡通片的相似之處。

11. 塞爾達公主

我用這個塞爾達角色設計把最好的留到了最後。 她的腿有點短，但整體風格準確。

開發人員 Charlie Marcotte 使用 Sass 和自定義 CSS 轉換來排列所有元素。 此外，由於 Pug 預處理器，原始 HTML 得到了相當大的簡化。

如果你想突破你的 CSS 知識的極限，為什麼不做一個類似的項目呢？ 這是測試您的技能的好方法，您可以隨時在下面的評論中分享您構建的任何內容。