大家好，我是你們的 貓哥，那個不喜歡吃魚、又不喜歡喵 的超級貓又在線營業啦 ~

平時如何發現好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

1. animate

強大的跨平臺的預設 css3 動畫庫，也是前端圈非常有名的動畫庫。

內置了很多典型的 css3 動畫，兼容性好使用方便。

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

2. tailwindcss

無需離開您的HTML，即可快速建立現代網站。

Tailwind CSS 是一個功能類優先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標記語言中組合起來，構建出任何設計。

https://github.com/tailwindlabs/tailwindcss

3. bulma

基于 Flexbox 的現代 CSS 框架。

Bulma 是一個免費、開源的 CSS 框架，它提供了易于使用的前端的組件，您可以輕松地組合這些組件來構建響應式 Web 界面。

無需懂得 CSS，有了它，即使完全不懂 CSS，也可以輕而易舉做出美觀的網頁。

Bulma 框架最大的特點，就是簡單好用。所有樣式都基于 class，只需為 HTML 元素指定class，樣式立刻生效。

https://github.com/jgthms/bulma

4. styled-components

styled-components 是一個針對 React 的 css in js 類庫。

它的優點在于：

• 貫徹 React 的 everything in JS 理念，降低 js 對 css 文件的依賴

• 組件的樣式和其他組件完全解耦，有效避免了組件之間的樣式污染

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

5. Hover

Hover.css 是一款非常簡單實用的純 CSS3 鼠標滑過特效動畫庫。

有 100 多種效果可以選擇，包括：2D 動畫、背景動畫、邊框動畫、圖標動畫、發光漸變、陰影、對話框、折角等 100 多種特效。

https://github.com/IanLunn/Hover

6. postcss

是一個用 JavaScript 工具和插件轉換 CSS 代碼的工具。

https://github.com/postcss/postcss

7. pure

一組輕量級、響應式純 css 模塊，適用于任何 Web 項目。

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

8. SpinKit

SpinKit 是一套網頁動畫效果，包含 8 種基于 CSS3 實現的很炫的加載動畫。

借助 CSS3 Animation 的強大功能來創建平滑，易于定制的動畫，SpinKit 的目標不是提供一個每個瀏覽器都兼容的解決方案，而是給現代瀏覽器提供更優的技術實現方案和更佳的使用體驗。

https://github.com/tobiasahlin/SpinKit

9. uikit

一款輕量級、模塊化的前端框架，可快速構建強大的 web 前端界面。

UIKit 提供了全面的 HTML、CSS 及 JS 組件，它們使用簡單，容易定制和擴展。

https://github.com/uikit/uikit

10. 30-seconds-of-css

滿足您所有開發需求的簡短 CSS 代碼片段。

CSS 片段集合包含 CSS3 的實用程序和交互式示例。它包括用于創建常用布局、樣式和動畫元素的現代技術，以及用于處理用戶交互的片段。

https://github.com/30-seconds/30-seconds-of-css

11. solved-by-flexbox

曾經僅靠 CSS 很難或不可能解決的問題，現在通過 Flexbox 變得簡單了。

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

12. emotion

Emotion 是一個用 JavaScript 編寫 css 樣式的庫，下一代 CSS-in-JS 。

它提供了強大的、可預測的樣式組合，還為開發人員提供了豐富的特性體驗，如源映射、標簽和測試實用程序。

同時支持字符串和對象樣式。

https://github.com/emotion-js/emotion

最后

平時如何發現好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

更多精彩項目，請看下方寶藏倉庫，請慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

不知不覺，原創文章已經寫到第 65 期了呢，幾乎每一篇都是貓哥精心挑選的優質開源項目，推送的每一篇文章里面的項目幾乎都是對前端開發很有幫助的。

原創不易，一篇優質的文章都是要肝幾個晚上才能肝出來的，花費很多時間、精力去篩選和寫推薦理由，大佬們看完文章后順手點個贊或者轉發吧，就當給貓哥一點鼓勵吧。

往期精文

• 推薦 12 個好用的 React 的開源項目，YYDS！

• 推薦 10 個好用的 Vue3 的開源項目，開發效率又能提升了！

• 推薦 9 個 Node.js 學習、進階、debugging 分析、實戰 的重磅開源項目

• 猛增 110K Star！年增長數最多的 10 大頂級前端學習資源項目！

• 推薦 7 個 Vue2、Vue3 源碼解密分析的開源項目

• Vue3 的學習教程匯總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目

關注公眾號：前端GitHub，回復 電子書 即可以獲得下面 1000 本技術精華書籍哦，貓哥微信號：CB834301747 。

如果不想錯過精彩內容，請多給本公眾號點贊哦，這樣就會先收到內容推薦的。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的视觉盛宴篇！推荐 12 个好用的 CSS 的开源项目，YYDS ！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。