前端: 如何更高效的學習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, 可以幫助我們快速構建組件.
