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
歡迎關注，每天都給你推送新鮮的前端技術文章