大家好，我是雙月。

今天分享一波css學(xué)習(xí)資源，從新手入門級(jí)到大神級(jí)都包括了，而且還有大佬總結(jié)的日常使用的css效果和代碼片段，不但可以學(xué)習(xí)下大神的css怎么寫的，還能用于工作中提高效率。

css 入門學(xué)習(xí)

強(qiáng)烈推薦菜鳥教程，非常適合新手學(xué)習(xí)，從最最基礎(chǔ)的部分開始講解，從css簡(jiǎn)介到語法到屬性介紹，同時(shí)有非常豐富的實(shí)戰(zhàn)demo，可以在線鍛煉自己的css，實(shí)時(shí)看效果。

資源地址：https://www.runoob.com/css/css-tutorial.html

當(dāng)然類似的還有w3school 也可以同時(shí)刷起來。

資源地址：https://www.w3school.com.cn/css/index.asp

css 進(jìn)階

當(dāng)你對(duì)css有了初步的認(rèn)知和理解之后，由于這些知識(shí)點(diǎn)比較分散不系統(tǒng)，而且不知道哪些會(huì)在工作中使用，接下來就要開始系統(tǒng)的學(xué)習(xí)css，并快速的理解掌握，應(yīng)用于工作之中。

這里推薦大漠的免費(fèi)的系統(tǒng)在線教程《十天精通CSS3》，這是一個(gè)很有意思的教程，也是為了提升你的學(xué)習(xí)效果，他是一種闖關(guān)的方式，每個(gè)章節(jié)的知識(shí)點(diǎn)都有實(shí)例演示結(jié)合在線編程完成任務(wù)的方式來學(xué)習(xí)，相信自己動(dòng)手會(huì)讓你理解的更快，可以讓你的學(xué)習(xí)效果更好。

資源地址：https://www.imooc.com/code/863

css 預(yù)處理器

CSS 預(yù)處理器技術(shù)已經(jīng)非常的成熟了，為了提升css的能力、代碼復(fù)用能力、以及開發(fā)效率，涌現(xiàn)出了越來越多的 CSS 的預(yù)處理器框架。

主要有：sass 、less 和 stylus，都是在現(xiàn)在的 vue 和 react 項(xiàng)目中經(jīng)常用到的，用法也很簡(jiǎn)單，只要學(xué)會(huì)一種，其他兩種都很容易上手，項(xiàng)目中用哪一種就要看自己的喜好了。

sass

Sass 是一種 CSS 的預(yù)編譯語言，Sass 為 CSS 賦予了更強(qiáng)大的功能。

它提供了?變量（variables）、嵌套（nested rules）?[混合（mixins）、函數(shù)（functions）等功能，并且完全兼容 CSS 語法。

Sass 能夠幫助復(fù)雜的樣式表更有條理，并且易于在項(xiàng)目?jī)?nèi)部或跨項(xiàng)目共享設(shè)計(jì)。

官方文檔地址：https://sass.bootcss.com/documentation

less

Less 是一門 CSS 預(yù)處理語言,它擴(kuò)展了 CSS 語言,增加了變量、Mixin、函數(shù)等特性。

Less 可以運(yùn)行在 Node 或?yàn)g覽器端。

官方文檔地址：less.bootcss.com/^[1]

stylus

富有表現(xiàn)力、動(dòng)態(tài)、健壯的 CSS。

它提供了一種高效，動(dòng)態(tài)和表達(dá)方式來生成 CSS。同時(shí)支持縮進(jìn)語法和常規(guī) CSS 樣式。

官方文檔地址：stylus-lang.com/^[2]

效率倍增

我們?nèi)粘９ぷ髦忻獠涣藢?shí)現(xiàn)一些特殊的效果和動(dòng)畫以及一些特殊的布局，如：

彈跳效果
彈性過度
抖動(dòng)效果
各種loading效果
1px邊框
絕對(duì)底部
水平垂直居中
圣杯布局
雙飛翼布局
水平垂直居中
各種陰影效果
多重邊框
半透明邊框

等等等，太多了，我就不一一舉例了。

像上面說的這些效果都有現(xiàn)成的代碼片段可用，當(dāng)然最主要的是可以作為我們的學(xué)習(xí)資源，看大佬們是怎樣實(shí)現(xiàn)的。

You-need-to-know-css

筆者把自己的收獲和工作中常用的一些 CSS 小樣式總結(jié)成這份文檔，該項(xiàng)目整理了 CSS 的各種效果實(shí)現(xiàn)，尤其是動(dòng)畫效果，也都提供了完整的實(shí)現(xiàn)代碼。

目前文檔一共包含 43 個(gè) CSS 的小樣式（持續(xù)更新中）是非常不錯(cuò)的學(xué)習(xí)資源。

資源地址：https://lhammer.cn/You-need-to-know-css/#/zh-cn/multiple-borders

比如：1px邊框?qū)崿F(xiàn)

box-shadow?+?transform?實(shí)現(xiàn) 1px 線條

animista

這是一個(gè)專業(yè)提供各種css實(shí)現(xiàn)效果的網(wǎng)站，網(wǎng)站做的很精致，有非常多的效果實(shí)現(xiàn)，有代碼演示，方便直接復(fù)制代碼，還可以復(fù)制壓縮后的代碼，如果你正在找某個(gè) CSS 的效果的話，可以到這里找找看。

最重要的是交互性很強(qiáng)，提供了各種選項(xiàng)可以動(dòng)態(tài)調(diào)整，比如動(dòng)畫類型、動(dòng)畫方向等，非常實(shí)用。

資源地址:https://animista.net/

spinkit

這是一個(gè)專門搞各種加載效果的網(wǎng)站，僅使用（transform?和?opacity）CSS 動(dòng)畫來創(chuàng)建平滑且易于自定義的動(dòng)畫。當(dāng)然也提供了源碼，如果正好需要可以直接復(fù)制過來。（當(dāng)然不提倡拿來主義）

比較懶，只放了一個(gè)靜態(tài)圖。

還有更多效果，可以直接打開下面的地址查看。

資源地址：https://tobiasahlin.com/spinkit/

CSS Tricks

總結(jié)一些常用的 CSS 樣式，記錄一些 CSS 的新屬性和一點(diǎn)奇技淫巧，沒有廢話，代碼簡(jiǎn)單易用，方便復(fù)制。

舉個(gè)nb的栗子：卡券生成器

.hollow-one-circle{
??width:?100px;
??height:?100px;
??position:?relative;
??background:?radial-gradient(circle?at?0?50px,?transparent?10px,?#00adb5?0)?top?left/100px?100%?no-repeat;
??
}

不光有代碼，還能動(dòng)態(tài)調(diào)整參數(shù)。

資源地址：https://qishaoxuan.github.io/css_tricks/

Animate

是一個(gè)有趣的，跨瀏覽器的 css3 動(dòng)畫庫(kù)，內(nèi)置了很多典型的 css3 動(dòng)畫，兼容性好使用方便。

animate.css 的使用非常簡(jiǎn)單，因?yàn)樗前巡煌膭?dòng)畫綁定到了不同的類里，所以想要使用哪種動(dòng)畫，只需要把通用類 animated 和相應(yīng)的類添加到元素上就行了。

也是前端開發(fā)必備動(dòng)畫庫(kù)。

資源地址：https://animate.style/

高精尖

上面都屬于是應(yīng)用層面的，但是我們學(xué)技術(shù)不但要知道怎樣用，還要知道背后的原理，為什么是這樣的。所以這里就到了學(xué)習(xí)深水區(qū)，要學(xué)習(xí)css更底層的東西。

這里我推薦個(gè)大佬：張?chǎng)涡瘢ù蠹叶贾懒耍恍枰榻B了），也推薦閱讀下的書籍《CSS選擇器世界》

大佬博客地址：https://www.zhangxinxu.com/ 上面有很多非常深入的文章，需要慢慢品嘗。

跨過這里，你就是大神了。

~ <> ~ 感謝閱讀，希望對(duì)你有所幫助，有用的話幫忙點(diǎn)個(gè)贊????吧。

css 學(xué)習(xí)和應(yīng)用，這波穩(wěn)了！