好用的前端 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 微型庫！

地址：點擊這里