12 個(gè)令人驚嘆的 CSS 項(xiàng)目

時(shí)間：2023-10-01 02:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-01 02:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

12 個(gè)令人驚嘆的 CSS 項(xiàng)目：或許，你認(rèn)為 CSS 只能用來(lái)控制網(wǎng)頁(yè)的結(jié)構(gòu)與樣式，但它的功能和應(yīng)用卻超乎你的想象。從逼真的圖像到特效動(dòng)畫(huà)，優(yōu)秀的開(kāi)發(fā)者利用它已創(chuàng)造了無(wú)數(shù)種可能。

在本文中，我們精選了純 CSS 實(shí)現(xiàn)的濾鏡以及各種效果，與大家分享。它們都是開(kāi)源的網(wǎng)頁(yè)設(shè)計(jì)相關(guān)項(xiàng)目。除了體驗(yàn)之外，有興趣的話，你還可以嘗試來(lái)實(shí)現(xiàn)它們。

1.Solar System

哇！如果你對(duì)太空?qǐng)鼍扒橛歇?dú)鐘，那么一定會(huì)被這個(gè) CSS 實(shí)現(xiàn)的太陽(yáng)系動(dòng)畫(huà)所震撼。作為空間學(xué)與物理學(xué)愛(ài)好者，作者參照了太陽(yáng)系軌道運(yùn)行的真實(shí)時(shí)間進(jìn)行設(shè)計(jì)，意味著每個(gè)行星都有相對(duì)地球年的時(shí)間，準(zhǔn)確的圍繞太陽(yáng)公轉(zhuǎn)。

項(xiàng)目地址：https://codepen.io/kowlor/pen/ZYYQoy

2.Gradient Background Animation

對(duì)于網(wǎng)站性能來(lái)說(shuō)，動(dòng)畫(huà)是眾人皆知的問(wèn)題引發(fā)者。如果優(yōu)化不佳，它們會(huì)直接影響頁(yè)面的打開(kāi)速度。而這個(gè) CSS 實(shí)現(xiàn)的漂亮的漸變動(dòng)畫(huà)，卻相當(dāng)?shù)妮p量，不僅易于編輯，而且支持自定義顏色。

項(xiàng)目地址：https://codepen.io/P1N2O/pen/pyBNzX

3.Stack Game

實(shí)現(xiàn)一款簡(jiǎn)單的游戲，并不一定需要 JS 的幫助，純 CSS 也能夠創(chuàng)造一款界面漂亮的 Stack 游戲。當(dāng)然，游戲看似容易，背后的設(shè)計(jì)并非那么簡(jiǎn)單。

項(xiàng)目地址：https://codepen.io/finnhvman/pen/xJRMJp

4.3D Progress Bars

這是一款漂亮、輕量、易于定制的進(jìn)度條開(kāi)源項(xiàng)目。進(jìn)度條采用 3D 制作，同時(shí)擁有清澈的外觀，你甚至可以將它們變成迷你 3D 圖表！

項(xiàng)目地址：https://codepen.io/rgg/pen/QbRyOq

5.Glitched Text

故障風(fēng)格的文本總會(huì)讓人有眼前一亮的感覺(jué)，而這個(gè)項(xiàng)目就是純 CSS 實(shí)現(xiàn)的故障效果。如果你想為網(wǎng)站增添酷炫的故障效果，那么不妨多了解下。

項(xiàng)目地址：https://codepen.io/lbebber/pen/ypgql

6.Francine

CSS 的能量超乎你想象，你甚至還可以利用它制作出藝術(shù)品效果。Francine 就是一個(gè)純 CSS 制作、展示的 18 世紀(jì)風(fēng)格的繪畫(huà)作品?；蛟S，你會(huì)驚訝 CSS 實(shí)現(xiàn)的效果竟能如此逼真。

項(xiàng)目地址：https://github.com/cyanharlow/purecss-francine

7.Mobile Phone

這個(gè)項(xiàng)目與《Francine》有異曲同工之處，它僅使用 CSS 和 HTML 便實(shí)現(xiàn)了手機(jī)界面效果，而且效果可以同網(wǎng)站照片相媲美。如果你有興趣，可詳細(xì)的了解其實(shí)現(xiàn)的過(guò)程。

項(xiàng)目地址：https://codepen.io/Wujek_Greg/pen/LmrweG

8.Map Creator

利用 JS 創(chuàng)造一個(gè)簡(jiǎn)單的 3D 地圖？不用那么復(fù)雜，純 CSS 就可以搞定。怎么樣，看上去還不錯(cuò)吧！

項(xiàng)目地址：https://codepen.io/onediv/pen/NrNebj

9.Instagram.css

想為你的網(wǎng)站添加一些 Instagram 風(fēng)格的圖片濾鏡效果？那么，純 CSS 實(shí)現(xiàn)的 Instagram 風(fēng)格的濾鏡庫(kù) —— Instagram.css 一定是你的菜。它的靈感來(lái)源于 CSSgram.

項(xiàng)目地址：https://picturepan2.github.io/instagram.css/

10.Animated Gradient Ghost Button

這是一個(gè)純 CSS 實(shí)現(xiàn)的漸變幽靈按鈕。漂亮的動(dòng)畫(huà)和漸變效果，是不是很酷呢？相信，它可以很好的融入到任何網(wǎng)站之中。

項(xiàng)目地址：https://codepen.io/ARS/pen/vEwEPP

11.Devices.css

如果你想在網(wǎng)站增添 iPhone X、iPhone 8 等移動(dòng)設(shè)備用于展示的話，那么一定不要錯(cuò)過(guò) Devices.css. 它是一個(gè)使用了純 CSS 實(shí)現(xiàn)主流移動(dòng)設(shè)備的庫(kù)，并以現(xiàn)代設(shè)備為模版。

項(xiàng)目地址：https://picturepan2.github.io/devices.css/

12.Dynamic Image Colorizing

這是一個(gè)很酷的純 CSS 實(shí)現(xiàn)的項(xiàng)目。你只需要通過(guò)電腦自帶的選色器，就能輕松地更換圖像的顏色，來(lái)試試吧！

項(xiàng)目地址：https://codepen.io/noahblon/pen/ZbjmbK

最后

利用 JS，我們能實(shí)現(xiàn)各種讓人驚嘆的頁(yè)面/動(dòng)畫(huà)效果，但 JS 并不是最輕量的解決方案。如果合理使用 CSS，你依然可以實(shí)現(xiàn)一些炫酷的效果，并且它對(duì)性能的影響會(huì)小得多。當(dāng)然，無(wú)論你使用哪種方式（JS or CSS），你都可以創(chuàng)造出創(chuàng)意且有趣的作品。

以上的作品，你最喜歡哪一個(gè)？歡迎評(píng)論與我們分享。

---

感謝你的閱讀。若你有所收獲，歡迎點(diǎn)贊與分享。

注：

1. 本文版權(quán)歸原作者所有，僅用于學(xué)習(xí)與交流；
2. 如需轉(zhuǎn)載譯文，煩請(qǐng)按下方注明出處信息，謝謝！

英文原文：12 Incredible Pure CSS Experiments
作者：Brenda Stokes Barron
譯者：IT程序獅
譯文地址：https://zhuanlan.zhihu.com/p/58424141

---

同時(shí)也歡迎關(guān)注我的微信【IT程序獅】，不定期分享 IT 學(xué)習(xí)文章與資源。

推薦文章