好用的前端 CSS 工具库（建议收藏）

我们在做前端开发时，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过 API 或配置项和其他部分交互，便形成了插件。

下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。

CSS PIN

CSS Spinners 和 Loaders – 模块化、可定制和单一的 HTML 元素代码。

地址：点击这里

shepherd

shepherd 用于引导您的用户浏览您的应用。

地址：点击这里

particles.js

particles.js 用于创建粒子的轻量级 JavaScript 库。

地址：点击这里

Happy Hues

Happy Hues 是一个调色板灵感网站。项目中需求中开发多主题的话可以参考一下。

地址：点击这里

Glassmorphism

Glassmorphism 是一种设计风格，，用于实现 UI 中“磨砂玻璃”效果。

地址：点击这里

Utopia

Utopia 一种思考流体响应式设计思想。

地址：点击这里

Specificity Visualizer

通过工具您可以通过鸟瞰图快速了解 CSS 文件中的选择器及其特性。

地址：点击这里

Reseter.css

结合Normalize.css 和 reset.CSS的替代方案。

优点：不会删除所有浏览器样式，而是重新定义有用的样式，大小只有**~0.7kb**

地址：点击这里

MoreToggles.css

MoreToggles.css 一个纯 CSS 库，为您提供各种好看的切换开关。

地址：点击这里

Charts.css

Charts.css 是一个用于数据可视化的开源 CSS 框架。

地址：点击这里

Optimizt

Optimizt用CLI命令去优化图像的工具。它可以压缩 PNG、JPEG、GIF 和 SVG 有损和无损，并为光栅图像创建 AVIF 和 WebP 版本。

以后需要优化图片时候，只需要在项目中运行script命令就快速生成WebP图片格式简单有便捷。

地址：点击这里

Halfmoon

具有内置暗模式和使用 CSS 变量的完全可定制性的前端框架；非常适合构建仪表板和工具。

地址：点击这里

Meanderer

用于响应式 CSS 运动路径的 JavaScript 微型库！

地址：点击这里