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

前言

你可能認爲 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 和顏色選擇工具更改圖片中的顏色。

交流

以爲文章能夠的朋友歡迎點贊收藏轉發文章~在學習web前端的過程當中，每每由於沒有資料或者沒人指導從而致使本身不想學，所以我特地準備了個羣，配套資料能夠找管理小姐姐領取！不論是學習到哪一個階段的小夥伴均可以獲取到本身相對應的資料，點贊收藏轉發進羣的朋友有機會獲取實體web前端學習書籍，感謝支持！！！