你可能認為 CSS 隻是一種簡單地為網頁設計樣式的語言，但它的功能比你想象的要多得多。 從逼真的圖像到甚至是視訊遊戲，你會驚訝地看到一個優秀的開發者可以用 CSS 做些什麼。
這裡有各種濾鏡和特效，它們都是開源的，可以用在你自己的 web 項目中。 這些子產品有的機遇 JavaScript，更多的是HTML。 這意味着它們比你期望的更輕盈。 看看這些驚人的純CSS實驗，也許你自己也可以嘗試一下。
太陽系
哇！ 如果你喜歡太空，一定會被這個用 CSS 實作的的太陽系動畫效果所震撼。 這不僅僅是一個漂亮的動畫; 相對于真實的地球年，每個行星都能準确地圍繞太陽旋轉。
檢視示範
漸變背景動畫效果
動畫對于網站來說是一個臭名昭着的問題。如果優化不佳，可能會導緻速度大服務放緩。這個美麗的動畫漸變效果非常輕巧，更不用說它能讓你很容易的就能編輯和添加自己的顔色。
疊疊高遊戲
你可以不用 JavaScript 來編寫一個遊戲。這個純粹用 CSS 實作的疊疊高遊戲看上去很簡單，但是很有趣，而且圖形也很漂亮。雖然做出來并不容易，但這隻也僅僅是讓 CSS 小小的露了一手。
檢視示範
3D進度條
漂亮輕便的進度條。易于定制，很容易适應你的項目。 這些條紋使用 3D 技術制作，具有獨特的液體外觀。 你甚至可以将它們變成迷你 3D 圖表！
檢視示範
出故障的文字
故障文本看起來總是很酷。這個案例沒有使用 GIF，僅用 JavaScript 或 HTML 就實作了生動的特效。 如果你想為你的網站添加小故障效果，請參考它。
檢視示範
Francine
你可以用 HTML 和 CSS 制作藝術品！ Francine 是一副18世紀風格的畫作，純粹用代碼制作和展示。 然而它看起來與其他傳統創作的藝術品沒有任何差別。
手機
與 Francine 類似，這款手機也是隻用 CSS 和 HTML 創造的，但是看上去簡直和真的一樣！ 如果你有興趣，可以使用代碼并檢視如何實作。
檢視示範
地圖創作器
你以為要用 JavaScript 來編寫這東西？ 再好好想想！ 這個可愛的 3D 地圖創作器除了 CSS（還有一點點HTML）之外什麼都沒有。 難道這不足以令人興奮嗎？
檢視示範
Instagram.css
你的網站需要一些仿 Instagram 風格的過濾器？ 這組縮小檔案也附帶安裝教程。 現在，你可以輕松地将 Instagram 過濾器添加到任何圖像中。
鬼影漸變效果按鈕
令人驚訝的是它是隻用 CSS 編寫的。 憑借其漂亮的動畫和漸變效果，把這個按鈕用在任何網站上，看起來都會很棒。
檢視示範
Devices.css
如果你曾經想在自己的網站上展示手機或電腦，并在螢幕上顯示你所選擇的圖檔，請參考此項目。 這些都是以現代裝置為藍本設計的！
動态圖像着色
這是一個非常酷的項目：用 CSS 和顔色選擇工具更改圖檔中的顔色。
示範效果
詳情：項 目 地 址
小巧、靈敏和美麗
你在網站上看到的許多驚人的特效都可以說是 JavaScript 的功勞，遺憾的是 JS 并不總是最輕量級的解決方案。 不過你可能會對CSS的功能感到驚訝。 如果做得正确，大多數情況下它對性能的影響要小得多。
無論是哪種方式，可以看到 CSS開發者提出的這些創意都很有趣。這些實驗項目是由一些真正的創新開發者做出的，是以請去給他們一些支援，并告訴我你覺得哪個是最酷的！