点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群

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

今天我们将分享22个关于网站设计的CSS库,希望对您的学习与网站设计、网站开发有所帮助。

1) Animate.css

地址:https://animate.style/

9ae18d74433b72235acb3d002115f9cb.png

帮助我们使用 HTML CSS 为网站创建动画效果。

2) normalize.css

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

cf62ce294330880d4333a0fa92df2c74.png

Normalize.css 是一个库,可帮助您在当今流行的浏览器中显示时更一致地构建所有元素。

3) Hover.css

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

04c2e9e4e1276fd82110c32af5a19cef.png

它是一个为网站中的 HTML 元素合成悬停效果的库。

4) 30 秒代码

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

f4e426348ede1322a58b2ccc3077d275.png

它综合了用于网站设计的 CSS 技巧。

5) Flexbox

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

feb1abc17e328ef84448fa224aef1012.png

它综合使用了 flexbox,为网站构建布局的常用方法。

6) SpinKit

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

716914a0a131d24844ec7bf685d2f258.png

帮助您为项目构建 CSS 加载动画效果。

7) Loaders.css

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

93fb864b5fd9fb32fda1a2f8ec1c4e26.png

为网站合成 CSS 加载器效果。

8) Hint.css

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

c6b6a7c8a71ba3a777858794f5f6483c.png

帮助您使用 CSS3 构建工具提示效果。

9) 国旗图标

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

1a8e68956853efbbc546b5657681ab2b.png

世界各国国旗和图标的集合。

10) 汉堡菜单

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

6726ac5c4e2dd9c284beea1668507e42.png

为移动菜单合成动画效果。

11)CSShake

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

895a9e7c2a9042f690483f3ea1b4a70a.png

为项目合成震动动画效果。

12)  CSS Animation

地址:https://cssanimation.rocks/

21a7aa46122c8fc94ea55e5b99fb06e2.png

帮助您为网站构建运动效果的文章摘要。

13) Instagram.css

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

bcbbe98894e276ecba16be24dbbeeb90.png

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

14) CSS Protips

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

a7b7b1a453303dfee95a3c63d11071a2.png

它是面向前端开发人员的 CSS 技巧集合。

15) Bootswatch

地址:https://bootswatch.com/

a22d7e3332cb50bab989295441e92400.png

为项目合成 Bootstrap 接口。

16) Magic

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

d617a1015de9eb84f9fbebf4a083711a.png

HTML 元素合成动画效果。

17) CSS Layout

地址:https://csslayout.io/

28eb161c4cf7d3f6e5bf4c1d15e7a047.png

使用 CSS 构建网站设计合成布局。

18) Charts.css

地址:https://chartscss.org/

cfd73ce22a1a6a5e4f822b412226a06a.png

帮助您使用 HTML CSS 为您的项目设计图表。

19) Pattern.css

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

d941144698c4e92140a7a5f656f4ae2e.png

允许您为网站设计精美的图像、背景图案。

20) Bttn.css

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

6ba785985c1e8da41aa5e22683edd1c2.png

HTML 按钮的设计界面摘要。

21) Page Transitions

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

6cecb7b1cde934db4eb86fac70e4a997.png

为项目合成css页面动画效果。

22)  Pretty Checkbox

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

72370a419dd8f42df7886d405b8e7806.png

设计 HTML 的复选框和单选框界面。

总结

感谢您的阅读,希望本文能帮助您提升工作效率,如果您有任何问题,请在留言区给我留言,我会尽快回复。

希望大家继续支持我,关注我,我会继续分享更多好内容。祝您今天过得愉快!

56efe487909d88151d861623b32401e2.png

往期推荐

大厂面试过程复盘(微信/阿里/头条,附答案篇)

3134f8f35c875ab2e032760de099f0e0.png

面试题:说说事件循环机制(满分答案来了)

7bdebc451a6b485e833c1f811adda809.png

专心工作只想搞钱的前端女程序员的2020

eadb78524943c62c8e87b96d3131a704.png


最后

  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

88df743b8e679fd1f944e59c9dae3226.png

3e4a35c393667d70d5f8be514915a92e.png

点个在看支持我吧

eb26f499ae4acc0b4d1fb6b290f101a4.gif

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐