这里是按照「分类」阅读往期的 HelloGitHub 月刊内容, 您目前在查看 HelloGitHub CSS 项目 集合。
LaTex 文档风格的 CSS 库。这是一个能够让你的网站看起来像 LaTex 文档的 CSS 样式库,支持定理、定义、引理和证明的标签,以及作者、副标题、摘要等可选的类名。

CSS 缓动函数速查表。缓动函数(Easing Functions)是一种用于控制 CSS 动画速度的函数,该项目提供了一系列优雅的缓动函数示例代码和效果展示。
.block { transition: transform 0.6s cubic-bezier(0.7, 0, 0.84, 0); }

免费的 Tailwind CSS 组件集合。该项目提供了一系列适用于网站、营销和电商等网站的免费 Tailwind CSS 组件。这些组件支持深色模式、移动端适配和 LTR,复制代码即可使用。

炫酷的神奇宝贝卡牌 CSS 效果。该项目是口袋怪兽卡高级 CSS 样式集合,使用了 3D 变换、滤镜、渐变等技术,实现了眩光、纹理、银河全息、垂直光束等效果。

面向后端开发者的 Web UI 组件库。这是一款采用原生态 HTML/CSS/JS 开发模式的免费 Web UI 组件库,它拿来即用无需构建工具,极易上手、UI 简约清爽,深受广大后端开发者们的喜爱。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>开始使用 Layui</title> <link href="./layui/css/layui.css" rel="stylesheet"> </head> <body> <!-- HTML --> <script src="./layui/layui.js"></script> <script> // 使用组件 layui.use(['layer', 'form'], function(){ var layer = layui.layer; var form = layui.form; // 欢迎语 layer.msg('Hello World'); }); </script> </body> </html>

一款极为流行的 Tailwind CSS 组件库。作为当下最流行的 Tailwind CSS 组件库,具有高颜值、更纯净的 HTML、深度自定义等特点。
<ul class="menu p-3 bg-base-200 rounded-xl"> <li class="menu-title"> <span>Menu Title</span> </li> <li><a>First Menu Item</a></li> <li><a>Second Menu Item</a></li> <li><a>Third Menu Item</a></li> </ul>

仅用 CSS 实现网络聊天。前端不用 JavaScript 只用 CSS 实现网络聊天的功能,秘诀是伪选择器加载的背景图像和永远加载的索引页。
.some-button:active { background-image: url('some_image.jpg') }

在 30 天内用 HTML 和 CSS 创建 30 个迷你项目的挑战。该项目包含了 30 个用 HTML+CSS 构建的迷你项目,每个项目通过动图直观地展示了实现的效果,不仅包含全部源码还指出了用到的知识点。
