大家好，我是你們的 超級貓，一個不喜歡吃魚、又不喜歡喵 的超級貓 ~
如果 CSS 是女孩子，肯定如上圖那樣吧 ? ~
簡介
一般人沒事的時候刷刷朋友圈、微博、電視劇、知乎，而有些人是沒事的時候刷刷 GitHub ，看看最近有哪些流行的專案。
久而久之，這差距就越來越大，因此總會有開源資訊的不對稱，有哪些優秀的前端開源專案值得學習的也不知道。
初步前端與高階前端之間，最大的差距可能就是資訊差造成的。
超級貓從 2016 年加入 GitHub，到現在的 2020 年，快整整 5 個年頭了。
從 2018 年開始，我就養成了每天逛 GitHub 的習慣，一般在早上上班前或者中午午休的時候都會逛一下。
看看每天都開源了哪些好的前端專案，還有用到的主流前端技術棧又是哪些，值得我去學習的。
因此也收藏了不少好的開源專案，在此推薦給大家，每週會有一到三篇精華文章推送。
希望你在瀏覽、學習了超級貓推薦的這些開源專案的過程中，你能學習到更多程式設計知識、提高程式設計技巧、找到程式設計的樂趣。
前端GitHub，專注於挖掘 GitHub 上優秀的前端開源專案，抹平你的前端資訊不對稱，涵蓋 JavaScript、Vue、React、Node、小程式、Flutter、Deno、HTML、CSS、資料結構與演算法 等等。
平時如何發現好的開源專案，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源專案
以下為【前端GitHub】的第 7 期精華內容。
今天給大家帶來的是 GitHub 上超火的 10 個 CSS 專案，希望你在這裡面找到寫 CSS 的靈感！
喵~ 喵~ 喵~ 正文開始了，上車坐穩扶好了~
You-need-to-know-css
該專案是 CSS 的各種效果實現，尤其是動畫效果。
筆者把自己的收穫和工作中常用的一些 CSS 小樣式總結成這份文件。
目前文件一共包含 43 個 CSS 的小樣式（持續更新…），所以還是很不錯的學習 CSS 的專案來的。
比如： 打字效果
<style>
main {
width: 100%; height: 229px;
display: flex;
justify-content: center;
align-items: center;
}
span {
display: inline-block;
width: 21ch;
font: bold 200% Consolas, Monaco, monospace; /*等寬字型*/
overflow: hidden;
white-space: nowrap;
font-weight: 500;
border-right: 1px solid transparent;
animation: typing 10s steps(21), caret .5s steps(1) infinite;
}
@keyframes typing{
from {
width: 0;
}
}
@keyframes caret{
50% { border-right-color: currentColor}
}
</style>
<template>
<main class="main">
<span>前端GitHub</span>
</main>
</template>
<script>
</script>
CSS-Inspiration
這裡可以讓你尋找到使用或者是學習 CSS 的靈感，以分類的形式，展示不同 CSS 屬性或者不同的課題使用 CSS 來解決的各種方法。
包含了：佈局(Layout)、陰影(box-shadow、drop-shadow)、偽類/偽元素、濾鏡(fliter)、邊框(border)、背景/漸變(linear-gradient/radial-gradient/conic-gradient)、混合模式（mix-blend-mode/background-blend-mode)、3D、動畫/過渡(transition/animation)、clip-path、文字類、綜合、CSS-Doodle、SVG 等內容。
css_tricks
該專案總結了一些常用的 CSS 樣式，記錄一些 CSS 的新屬性和一點奇技淫巧。
比如 提示氣泡的效果
<div class="poptip btn" aria-controls="彈出氣泡">poptip</div>
$poptipBg: #30363d;
$color: #fff;
$triangle: 8px;
$distance: -12px;
.poptip {
position: relative;
z-index: 101;
&::before,
&::after {
visibility: hidden;
opacity: 0;
transform: translate3d(0, 0, 0);
transition: all 0.3s ease 0.2s;
box-sizing: border-box;
}
&::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: $triangle $triangle 0 $triangle;
border-color: $poptipBg transparent transparent transparent;
left: calc(50% - #{$triangle});
top: 0px;
transform: translateX(0%) translateY($distance);
}
&::after {
font-size: 14px;
color: $color;
content: attr(aria-controls);
position: absolute;
padding: 6px 12px;
white-space: nowrap;
z-index: -1;
left: 50%;
bottom: 100%;
transform: translateX(-50%) translateY($distance);
background: $poptipBg;
line-height: 1;
border-radius: 2px;
}
&:hover::before,
&:hover::after {
visibility: visible;
opacity: 1;
}
}
.btn {
min-width: 100px;
line-height: 1.5;
padding: 5px 10px;
color: #fff;
background: #00adb5;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
效果：
animista
該專案裡面有各種 CSS 實現的效果，還有程式碼演示，方便直接複製程式碼，還可以複製壓縮後的程式碼，如果你在找某個 CSS 的效果的話，可以到這裡找找看。
spinkit
彙集了實現各種載入效果的 CSS 程式碼片段。
SpinKit 僅使用（transform 和 opacity）CSS 動畫來建立平滑且易於自定義的動畫。
You-Dont-Need-JavaScrip
十天精通 CSS3
這是前端大佬大漠出的一個免費的 CSS3 教程，對於有一定 CSS2 經驗的夥伴，能讓您系統的學習 CSS3，快速的理解掌握並應用於工作之中。
裡面的內容有講解，還有程式碼演習，學完之後，可以練習所學的 api ，真的很不錯。
超級貓入門前端時，也學習過裡面的內容呢，雖然現在忘記的差不多了 ?，但是學過！。
Animate
是一個有趣的，跨瀏覽器的 css3 動畫庫，內建了很多典型的 css3 動畫，相容性好使用方便。
animate.css 的使用非常簡單，因為它是把不同的動畫繫結到了不同的類裡，所以想要使用哪種動畫，只需要把通用類 animated 和相應的類新增到元素上就行了。
做為一個前端開發，如果不知道這個庫就真的很失敗了。
sass
Sass 是一種 CSS 的預編譯語言，Sass 為 CSS 賦予了更強大的功能。
它提供了 變數（variables）、巢狀（nested rules） [混合（mixins）、函式（functions）等功能，並且完全相容 CSS 語法。
Sass 能夠幫助複雜的樣式表更有條理， 並且易於在專案內部或跨專案共享設計。
less
Less 是一門 CSS 預處理語言,它擴充套件了 CSS 語言,增加了變數、Mixin、函式等特性。
Less 可以執行在 Node 或瀏覽器端。
stylus
富有表現力、動態、健壯的 CSS。
它提供了一種高效，動態和表達方式來生成 CSS。同時支援縮排語法和常規 CSS 樣式。
CSS 前處理器技術已經非常的成熟了，而且也湧現出了越來越多的 CSS 的前處理器框架。
對於 sass 、less 和 stylus，都是在現在的 vue 和 react 專案中經常用到的，用法也很簡單，只要學會一種，其他兩種都很容易上手，專案中用哪一種就要看自己的喜歡了。
最後
最近加班有點嚴重，所有文章更新慢了很多，同是打工貓，生活不易啊！
好了啦，【前端GitHub】的第 7 期內容已經講完了啦。
更多精彩內容請關注下方倉庫：
平時如何發現好的開源專案，可以看看這兩篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源專案 和 恕我直言，你可能連 GitHub 搜尋都不會用 - 如何精準搜尋的神仙技巧。
可以加超級貓的 wx：CB834301747 ，一起閒聊 前端GitHub。
覺得有用 ？喜歡就收藏，順便點個贊吧，你的支援是我最大的鼓勵！
往期精文
你最想對超級貓說點啥？