22 個用于網(wǎng)站設(shè)計的 CSS 庫

點擊上方?前端Q，關(guān)注公眾號

回復(fù)加群，加入前端Q技術(shù)交流群

原文?| https://javascript.plainenglish.io/26-github-open-sources-for-learning-programming-4d0021d9f336

今天我們將分享22個關(guān)于網(wǎng)站設(shè)計的CSS庫，希望對您的學(xué)習(xí)與網(wǎng)站設(shè)計、網(wǎng)站開發(fā)有所幫助。

1) Animate.css

地址：https://animate.style/

幫助我們使用 HTML CSS 為網(wǎng)站創(chuàng)建動畫效果。

2) normalize.css

地址：https://necolas.github.io/normalize.css/

Normalize.css 是一個庫，可幫助您在當(dāng)今流行的瀏覽器中顯示時更一致地構(gòu)建所有元素。

3) Hover.css

地址：https://ianlunn.github.io/Hover/

它是一個為網(wǎng)站中的 HTML 元素合成懸停效果的庫。

4) 30 秒代碼

地址：https://www.30secondsofcode.org/css/p/1

它綜合了用于網(wǎng)站設(shè)計的 CSS 技巧。

5) Flexbox

地址：https://philipwalton.github.io/solved-by-flexbox/

它綜合使用了 flexbox，為網(wǎng)站構(gòu)建布局的常用方法。

6) SpinKit

地址：https://tobiasahlin.com/spinkit/

幫助您為項目構(gòu)建 CSS 加載動畫效果。

7) Loaders.css

地址：https://connoratherton.com/loaders

為網(wǎng)站合成 CSS 加載器效果。

8) Hint.css

地址：https://kushagra.dev/lab/hint/

幫助您使用 CSS3 構(gòu)建工具提示效果。

9) 國旗圖標(biāo)

地址：https://flagicons.lipis.dev/

世界各國國旗和圖標(biāo)的集合。

10)?漢堡菜單

地址：https://jonsuh.com/hamburgers/

為移動菜單合成動畫效果。

11）CSShake

地址：https://elrumordelaluz.github.io/csshake/

為項目合成震動動畫效果。

12) ?CSS Animation

地址：https://cssanimation.rocks/

幫助您為網(wǎng)站構(gòu)建運動效果的文章摘要。

13) Instagram.css

地址：https://picturepan2.github.io/instagram.css/

Instagram 中常用圖像的色彩效果合成。

14) CSS Protips

地址：https://github.com/AllThingsSmitty/css-protips

它是面向前端開發(fā)人員的 CSS 技巧集合。

15) Bootswatch

地址：https://bootswatch.com/

為項目合成 Bootstrap 接口。

16) Magic

地址：https://www.minimamente.com/project/magic/

HTML 元素合成動畫效果。

17) CSS Layout

地址：https://csslayout.io/

使用 CSS 構(gòu)建網(wǎng)站設(shè)計合成布局。

18) Charts.css

地址：https://chartscss.org/

幫助您使用 HTML CSS 為您的項目設(shè)計圖表。

19) Pattern.css

地址：https://bansal.io/pattern-css

允許您為網(wǎng)站設(shè)計精美的圖像、背景圖案。

20) Bttn.css

地址：https://bttn.surge.sh/

HTML 按鈕的設(shè)計界面摘要。

21) Page Transitions

地址：https://github.com/codrops/PageTransitions

為項目合成css頁面動畫效果。

22) ?Pretty Checkbox

地址：https://lokesh-coder.github.io/pretty-checkbox/#basic-checkbox

設(shè)計 HTML 的復(fù)選框和單選框界面。

總結(jié)

感謝您的閱讀，希望本文能幫助您提升工作效率，如果您有任何問題，請在留言區(qū)給我留言，我會盡快回復(fù)。

希望大家繼續(xù)支持我，關(guān)注我，我會繼續(xù)分享更多好內(nèi)容。祝您今天過得愉快！

往期推薦

大廠面試過程復(fù)盤(微信/阿里/頭條,附答案篇)

面試題：說說事件循環(huán)機制(滿分答案來了)

專心工作只想搞錢的前端女程序員的2020

最后

• 歡迎加我微信，拉你進技術(shù)群，長期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認真學(xué)前端，做個專業(yè)的技術(shù)人...

點個在看支持我吧