翻譯：瘋狂的技術(shù)宅

本文首發(fā)微信公眾號(hào)：jingchengyideng

歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

你可能認(rèn)為 CSS 只是一種簡(jiǎn)單地為網(wǎng)頁(yè)設(shè)計(jì)樣式的語(yǔ)言，但它的功能比你想象的要多得多。 從逼真的圖像到甚至是視頻游戲，你會(huì)驚訝地看到一個(gè)優(yōu)秀的開發(fā)者可以用 CSS 做些什么。

這里有各種濾鏡和特效，它們都是開源的，可以用在你自己的 web 項(xiàng)目中。 這些模塊有的機(jī)遇 JavaScript，更多的是HTML。 這意味著它們比你期望的更輕盈。 看看這些驚人的純CSS實(shí)驗(yàn)，也許你自己也可以嘗試一下。

太陽(yáng)系

哇！ 如果你喜歡太空，一定會(huì)被這個(gè)用 CSS 實(shí)現(xiàn)的的太陽(yáng)系動(dòng)畫效果所震撼。 這不僅僅是一個(gè)漂亮的動(dòng)畫; 相對(duì)于真實(shí)的地球年，每個(gè)行星都能準(zhǔn)確地圍繞太陽(yáng)旋轉(zhuǎn)。

漸變背景動(dòng)畫效果

動(dòng)畫對(duì)于網(wǎng)站來(lái)說(shuō)是一個(gè)臭名昭著的問(wèn)題。如果優(yōu)化不佳，可能會(huì)導(dǎo)致速度大服務(wù)放緩。這個(gè)美麗的動(dòng)畫 漸變效果 非常輕巧，更不用說(shuō)它能讓你很容易的就能編輯和添加自己的顏色。

疊疊高游戲

你可以不用 JavaScript 來(lái)編寫一個(gè)游戲。這個(gè)純粹用 CSS 實(shí)現(xiàn)的疊疊高游戲看上去很簡(jiǎn)單，但是很有趣，而且圖形也很漂亮。雖然做出來(lái)并不容易，但這只也僅僅是讓 CSS 小小的露了一手。

3D進(jìn)度條

漂亮輕便的進(jìn)度條。易于定制，很容易適應(yīng)你的項(xiàng)目。 這些條紋使用 3D 技術(shù)制作，具有獨(dú)特的液體外觀。 你甚至可以將它們變成迷你 3D 圖表！

出故障的文字

故障文本看起來(lái)總是很酷。這個(gè)案例沒有使用 GIF，僅用 JavaScript 或 HTML 就實(shí)現(xiàn)了生動(dòng)的特效。 如果你想為你的網(wǎng)站添加小故障效果，請(qǐng)參考它。

Francine

你可以用 HTML 和 CSS 制作藝術(shù)品！ Francine 是一副18世紀(jì)風(fēng)格的畫作，純粹用代碼制作和展示。 然而它看起來(lái)與其他傳統(tǒng)創(chuàng)作的藝術(shù)品沒有任何區(qū)別。

手機(jī)

與 Francine 類似，這款手機(jī)也是只用 CSS 和 HTML 創(chuàng)造的，但是看上去簡(jiǎn)直和真的一樣！ 如果你有興趣，可以使用代碼并查看如何實(shí)現(xiàn)。

你以為要用 JavaScript 來(lái)編寫這東西？ 再好好想想！ 這個(gè)可愛的 3D 地圖創(chuàng)作器除了 CSS(還有一點(diǎn)點(diǎn)HTML)之外什么都沒有。 難道這不足以令人興奮嗎？

你的網(wǎng)站需要一些仿 Instagram 風(fēng)格的過(guò)濾器？ 這組縮小文件也附帶安裝教程。 現(xiàn)在，你可以輕松地將 Instagram 過(guò)濾器添加到任何圖像中。

鬼影漸變效果按鈕

令人驚訝的是它是只用 CSS 編寫的。 憑借其漂亮的動(dòng)畫和漸變效果，把這個(gè)按鈕用在任何網(wǎng)站上，看起來(lái)都會(huì)很棒。

如果你曾經(jīng)想在自己的網(wǎng)站上展示手機(jī)或電腦，并在屏幕上顯示你所選擇的圖片，請(qǐng)參考此項(xiàng)目。 這些都是以現(xiàn)代設(shè)備為藍(lán)本設(shè)計(jì)的！

動(dòng)態(tài)圖像著色

這是一個(gè)非常酷的項(xiàng)目：用 CSS 和顏色選擇 工具 更改圖片中的顏色。

小巧、靈敏和美麗

你在網(wǎng)站上看到的許多驚人的特效都可以說(shuō)是 JavaScript 的功勞，遺憾的是 JS 并不總是最輕量級(jí)的解決方案。 不過(guò)你可能會(huì)對(duì)CSS的功能感到驚訝。 如果做得正確，大多數(shù)情況下它對(duì)性能的影響要小得多。

無(wú)論是哪種方式，可以看到 CSS開發(fā)者提出的這些創(chuàng)意都很有趣。這些實(shí)驗(yàn)項(xiàng)目是由一些真正的創(chuàng)新開發(fā)者做出的，所以請(qǐng)去給他們一些支持，并告訴我你覺得哪個(gè)是最酷的！

本文首發(fā)微信公眾號(hào)：jingchengyideng

歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。