前端：如何更高效的學習Css? 有哪些庫值得推薦？

作者： 徐小夕 來源： 趣談前端

如何高效學習Css

之前在工作中也css 做過很多有意思的事情， 比如用 css 畫圖示， 寫輪播圖， 寫動效， 做佈局等等， 但是這些應用的實現都依賴於 html 和 css 基礎知識。

根據我自己的學習經驗， 我們需要掌握如下基礎知識：

Css 基本語法結構和屬性設定

Css 盒模型

Css 定位方式

Css 佈局

Css BFC（塊級格式上下文）

Css 偽類和偽元素

Css 媒體查詢

Css 過渡與動畫

掌握了基礎知識之後可以多寫案例和學習別人的優秀經驗， 這裡給大家分享一個我剛開始學習前端的網站 「https：//codeguide。co/」。

這個網站有非常多前端的基礎知識和最佳經驗， 還提供了很多經典程式碼片段， 供我們學習參考：

趣談前端

同時學習也離不開書籍， 看經典書籍能讓我們更深入理解語言本身， 這裡也給大家分享我之前覺得不錯且有深度的 css 書籍：

「Css世界」

「Css揭秘」

在看完這2本書籍之後相信大家對css的理解會更加深刻。 接下來和大家分享幾個非常不錯css 庫。

好用的css庫分享

很多時候我們在實際的工作中很少用到純 css 類的工具庫， 一般都是能手寫就儘量手寫， 但是涉及到一些複雜的動畫互動， 我們用已有的第三方庫還是非常高效的，和大家分享幾個我之前經常使用的 css 庫。

1. hover.css

趣談前端

開箱即用的滑鼠懸停動畫， 支援的動畫型別有：

2D Transitions（2D過渡）

Background Transitions（背景過渡）

Icons Transitions（圖示過渡）

Border Transitions（邊框過渡）

Shadow and Glow（陰影過渡）

Speech Bubbles（氣泡效果過渡）

Curls （卷積過渡）

如果大家有類似的應用場景， 不妨參考一下。

2. animate.css

趣談前端

一款跨瀏覽器簡單便捷的 CSS 動畫庫， 提供了非常豐富的動畫效果， 目前很多開源專案都用到了它， H5-Dooring 和 DooringX 也內建了很多它的動畫效果。 如果大家有類似的應用場景， 不妨參考一下。

3. Magic

趣談前端

整合各種特殊動效的 css 動畫庫， 動畫效果非常震憾， 如果大家想做一個酷炫的網站， 不妨參考使用一下css 庫。

4. csshake

趣談前端

一個能夠震動和晃動DOM元素的CSS庫， 在移動端模仿手機震動， QQ視窗震動， 還是非常有意思的。

5. hint.css

趣談前端

一個用純 css 和 html 實現的提示庫。 體積超級小， 對於一些位置固定的提示場景， 非常有用， 不用擔心包體積過大的煩惱~

6. kite

趣談前端

一個相容性極好且靈活佈局 css 庫。 使用inline-block，基於 OOCSS 和 MindBEMding， 可以幫助我們快速構建元件。