12個使人驚歎的CSS實驗項目

翻譯：瘋狂的技術宅
原文： https://1stwebdesigner.com/12...

---

本文首發微信公衆號：jingchengyideng
歡迎關注，天天都給你推送新鮮的前端技術文章

---

你可能認爲 CSS 只是一種簡單地爲網頁設計樣式的語言，但它的功能比你想象的要多得多。 從逼真的圖像到甚至是視頻遊戲，你會驚訝地看到一個優秀的開發者能夠用 CSS 作些什麼。

這裏有各類濾鏡和特效，它們都是開源的，能夠用在你本身的 web 項目中。 這些模塊有的機遇 JavaScript，更多的是HTML。 這意味着它們比你指望的更輕盈。 看看這些驚人的純CSS實驗，也許你本身也能夠嘗試一下。

太陽系

哇！ 若是你喜歡太空，必定會被這個用 CSS 實現的的太陽系動畫效果所震撼。 這不只僅是一個漂亮的動畫; 相對於真實的地球年，每一個行星都能準確地圍繞太陽旋轉。

查看演示

項目連接：https://codepen.io/kowlor/pen...

漸變背景動畫效果

動畫對於網站來講是一個臭名昭着的問題。若是優化不佳，可能會致使速度大服務放緩。這個美麗的動畫漸變效果很是輕巧，更不用說它能讓你很容易的就能編輯和添加本身的顏色。

項目連接：https://codepen.io/P1N2O/pen/...

疊疊高遊戲

你能夠不用 JavaScript 來編寫一個遊戲。這個純粹用 CSS 實現的疊疊高遊戲看上去很簡單，可是頗有趣，並且圖形也很漂亮。雖然作出來並不容易，但這隻也僅僅是讓 CSS 小小的露了一手。

查看演示

項目連接：https://codepen.io/finnhvman/...

3D進度條

漂亮輕便的進度條。易於定製，很容易適應你的項目。 這些條紋使用 3D 技術製做，具備獨特的液體外觀。 你甚至能夠將它們變成迷你 3D 圖表！

查看演示

項目連接：https://codepen.io/rgg/pen/Qb...

出故障的文字

故障文本看起來老是很酷。這個案例沒有使用 GIF，僅用 JavaScript 或 HTML 就實現了生動的特效。 若是你想爲你的網站添加小故障效果，請參考它。

查看演示

項目連接：https://codepen.io/lbebber/pe...

Francine

你能夠用 HTML 和 CSS 製做藝術品！ Francine 是一副18世紀風格的畫做，純粹用代碼製做和展現。 然而它看起來與其餘傳統創做的藝術品沒有任何區別。

項目連接：https://github.com/cyanharlow...

手機

與 Francine 相似，這款手機也是隻用 CSS 和 HTML 創造的，可是看上去簡直和真的同樣！ 若是你有興趣，可使用代碼並查看如何實現。

查看演示

項目連接：https://codepen.io/Wujek_Greg...

地圖創做器

你覺得要用 JavaScript 來編寫這東西？ 再好好想一想！ 這個可愛的 3D 地圖創做器除了 CSS（還有一點點HTML）以外什麼都沒有。 難道這不足以使人興奮嗎？

查看演示

項目連接：https://codepen.io/onediv/pen...

Instagram.css

你的網站須要一些仿 Instagram 風格的過濾器？ 這組縮小文件也附帶安裝教程。 如今，你能夠輕鬆地將 Instagram 過濾器添加到任何圖像中。

項目連接：https://picturepan2.github.io...

鬼影漸變效果按鈕

使人驚訝的是它是隻用 CSS 編寫的。 憑藉其漂亮的動畫和漸變效果，把這個按鈕用在任何網站上，看起來都會很棒。

查看演示

項目地址：https://codepen.io/ARS/pen/vE...

Devices.css

若是你曾經想在本身的網站上展現手機或電腦，並在屏幕上顯示你所選擇的圖片，請參考此項目。 這些都是以現代設備爲藍本設計的！

項目地址：https://picturepan2.github.io...

動態圖像着色

這是一個很是酷的項目：用 CSS 和顏色選擇工具更改圖片中的顏色。

演示效果

項目地址：https://codepen.io/noahblon/p...

小巧、靈敏和美麗

你在網站上看到的許多驚人的特效均可以說是 JavaScript 的功勞，遺憾的是 JS 並不老是最輕量級的解決方案。 不過你可能會對CSS的功能感到驚訝。 若是作得正確，大多數狀況下它對性能的影響要小得多。

不管是哪一種方式，能夠看到 CSS開發者提出的這些創意都頗有趣。這些實驗項目是由一些真正的創新開發者作出的，因此請去給他們一些支持，並告訴我你以爲哪一個是最酷的！

---

本文首發微信公衆號：jingchengyideng

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章