翻譯：瘋狂的技術宅

本文首發微信公眾號：jingchengyideng

歡迎關注，每天都給你推送新鮮的前端技術文章

你可能認為 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 風格的過濾器？ 這組縮小文件也附帶安裝教程。 現在，你可以輕松地將 Instagram 過濾器添加到任何圖像中。

鬼影漸變效果按鈕

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

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

動態圖像著色

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

小巧、靈敏和美麗

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

無論是哪種方式，可以看到 CSS開發者提出的這些創意都很有趣。這些實驗項目是由一些真正的創新開發者做出的，所以請去給他們一些支持，并告訴我你覺得哪個是最酷的！

本文首發微信公眾號：jingchengyideng

歡迎關注，每天都給你推送新鮮的前端技術文章

總結

以上是生活随笔為你收集整理的css实验内容,12个令人惊叹的CSS实验项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。