盘点GitHub 上 25个CSS 开源项目，有的是规范指南，有的是好玩的 CSS 库，有的是动画库，有的是CSS技巧

前端开发者可收藏本篇文章，方便日后查阅。

如有帮助，点赞记录一下吧。

1、Animate

https://github.com/animate-css/animate.css

animate.css 是一个有趣的，跨浏览器的 css3 动画库，兼容性好，使用方便。它预设了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

animate.css 基于 CSS3，只兼容支持 CSS3 animate 属性的浏览器，IE10+、Firefox、Chrome、Opera、Safari。

目前Github标星81.8K，是前端圈最有名的动画库。

2、濒临灭绝的动物

https://www.webhek.com/misc-res/species-in-pieces

30 种稀有物种面临生存危机，通过 CSS 实现的 30 个碎片拼图呈现它们，你能看到它们在挣扎,在反抗，CSS 展现了一场物种危机。

3、提高CSS 技巧

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

帮助你提高 CSS 技能的一系列技巧。

包括 Flex 布局、SVG图标、:empty 的用法、选择器小技巧、布局技巧等等。

4、Devices.css

https://http://picturepan2.github.io/devices.css/

如果你想在网站增添 iPhone X、iPhone 8 等移动设备用于展示的话，那么一定不要错过 Devices.css. 它是一个使用了纯 CSS 实现主流移动设备的库，并以现代设备为模版。

5、手搓《我的世界》

https://github.com/BenjaminAster/CSS-Minecraft

在线体验：
https://benjaminaster.com/css-minecraft/

480 行 CSS + 46022 行 HTML，堆出了一个 3D 世界！

一位名叫 Benjamin Aster 的开发者却玩了波「反套路」—— 他竟然用纯 HTML 和 CSS 搞出了一个《我的世界》（Minecraft）克隆版！

没听错，整个项目里一行 JavaScript 都没有。所有的交互逻辑、动画效果，全靠这两位“老将”撑场，但是效果属实不错。

让人意外的是，整个项目仅用 480 行 CSS 实现：

还有 46,022 行 HTML 代码，只有 3.07MB！

6、Animation library

https://github.com/kaustubhmenon/animation-library

文档地址：
https://animation.kaustubhmenon.com/

你可以把Animation library当作是Animate.css的替代方案，因为它们提供类似的动画类别。但是，与Animate.css不同点在于，Animation library不提供允许设置首选动画持续时间、速度和计时的其他自定义选项。

此外，Animation library源文件被划分为不同的类 — 例如，淡入淡出动画的所有变体都位于单个源文件中，其他动画类也是如此。

7、CSS 奇技淫巧

https://github.com/chokcoco/iCSS

记录了 CSS 容易忽视的技巧和细节。这是一系列的文章，围绕 CSS/Web动画展开，包含一些有趣的话题，帮助开发者拓宽解决问题的思路。8

8、Magic CSS

https://github.com/miniMAC/magic

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

Magic CSS也是一个很有趣的动画库，与之前介绍的动画库相比，它提供的的动画更具吸引力。软件包提供的动画对于页面过渡非常方便。

但是，magic CSS的一个缺点是它不支持Opera迷你浏览器。

9、CSS 实现的艺术

https://github.com/cyanharlow/purecss-francine

使用 CSS 和 HTML 来创作艺术。

Francine 就是一个纯 CSS 制作、展示的 18 世纪风格的绘画作品。或许，你会惊讶 CSS 实现的效果竟能如此逼真。

10、CSS风格指导

https://github.com/necolas/idiomatic-css

编写符合语言习惯的 CSS。

11、solved-by-flexbox

https://github.com/philipwalton/solved-by-flexbox

曾经仅靠 CSS 很难或不可能解决的问题，现在通过 Flexbox 变得简单了。

12、Micron

https://github.com/webkul/micron

文档地址：
https://webkul.github.io/micron/docs.html#getting-started

Micron是一个使用CSS动画创建且JavaScript控制的微交互库。简而言之，Micron允许你在单击元素时轻松地将多个动画附加到元素上。并且还有其他设置选项可帮助管理动画流。

此外，你可以绑定并从其他元素触发动画 - 例如，你可以让按钮元素激活要附加到另一div的动画。

13、Tailwindcss

https://github.com/tailwindlabs/tailwindcss

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

无需离开您的HTML，即可快速建立现代网站。

14、styled-components

https://github.com/styled-components/styled-components

styled-components 是一个针对 React 的 css in js 类库。

它的优点在于：

贯彻 React 的 everything in JS 理念，降低 js 对 css 文件的依赖
组件的样式和其他组件完全解耦，有效避免了组件之间的样式污染

15、Hover

https://github.com/IanLunn/Hover

Hover.css 是一款非常简单实用的纯 CSS3 鼠标滑过特效动画库。

有 100 多种效果可以选择，包括：2D 动画、背景动画、边框动画、图标动画、发光渐变、阴影、对话框、折角等 100 多种特效。

16、Uikit

https://github.com/uikit/uikit

一款轻量级、模块化的前端框架，可快速构建强大的 web 前端界面。

UIKit 提供了全面的 HTML、CSS 及 JS 组件，它们使用简单，容易定制和扩展。

17、Font-Awesome

https://github.com/FortAwesome/Font-Awesome

这个 70K Star 的开源项目是一个 CSS、SVG、字体的工具箱。

在这里你可以找到你任何想要的可缩放矢量图标，它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式，已经被数百万设计师、开发者使用。

18、AOS

https://github.com/michalsnik/aos#1-initialize-aos

文档地址：
https://michalsnik.github.io/aos/

Animate on scroll（AOS）是一个很有意思的库，允许你在滚动标记元素时对其进行动画处理。

该库提供预定义动画，如淡入淡出、翻转、缩放等，并允许你在用户滚动自定义元素时将预定义动画附加到自定义元素。

AOS还提供其他配置选项，允许你设置首选动画持续时间、延迟和运行次数。

19、Postcss

https://github.com/postcss/postcss

是一个用 JavaScript 工具和插件转换 CSS 代码的工具。

20、Pure

https://github.com/pure-css/pure

一组轻量级、响应式纯 css 模块，适用于任何 Web 项目。

21、CSS 实现哈利波特中的活点地图

https://github.com/icochi/The-Marauders-Map

使用 CSS 和 JavaScript 实现哈利波特中的活点地图效果。首先通过 CSS 实现地图鲁加和魔法效果，然后通过 JavaScript 实现脚印动画和姓名横幅的移动。

最后，通过调整样式和删除不必要的 DOM 节点来解决性能问题。所有代码已提交至开源平台。

22、CSS UI框架

https://github.com/Equal-UI/Equal

基于Vue3和Tailwind CSS构建的开源UI组件库，可以为开发者提供高效、美观且易于定制的界面开发工具。

Equal UI虽然并不是很出名，可能使用过它的小伙伴并不多，但是它还是有很多特点的：

基于Vue3和Tailwind CSS：充分利用Vue3的Composition API 和响应式系统，同时结合Tailwind CSS的灵活性，实现高效开发。
轻量级设计：压缩后的文件大小仅为12KB，适合对性能有要求的项目。
丰富的组件库：包含超过30个精心设计的组件，如按钮、输入框、模态框、通知、弹出框等。
内置深色主题：支持暗黑模式，提升用户体验。
高度可定制：开发者可以通过Tailwind CSS的类名轻松调整组件样式。
无障碍支持：部分版本的Equal UI提供无障碍功能，帮助开发者实现符合WCAG标准的界面。

目前Equal UI在Github上拥有1.2k个星星，而且呈现稳步上升的趋势。

Equal UI提供了很多种按钮样式

普通样式

轮廓线样式

文本按钮

圆角按钮

另外还有一些，比如带图标的按钮、加载按钮等。

复选框和单选框

Equal UI提供了颜色丰富的复选框和单选框组件。

复选框

单选框

主题颜色你可以根据实际需要自己设置。

23、Instagram.css

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

这是一个纯 CSS 实现的 Instagram 滤镜。

24、————

等待评论推荐......

25、————