你未必知道的CSS知識點（第二季）

本文的每一條，都是我曾經發過的掘金沸點，其中有不少條超過了百贊（竊喜）。

鑑於時不時有童鞋翻我之前的沸點，所以，本系列收集了我的目前發過的全部CSS知識點動圖，以便閱讀。

兩個月前，曾發過一篇《你未必知道的49個CSS知識點》，已有3000多贊，這裏，老姚真心謝謝你們的支持。

本篇是第二季。與前一篇相比，每一個動圖都作了加速處理，看起來更流暢一些。

另外，本篇還簡單地作了歸類，動畫特效相對多一些。

須要說明的是，建立複雜特效非我本意，其中大部分都是一兩個div就能實現的效果。主要目的是演示漸變、陰影、變換、動畫等知識的綜合應用。

大部分提供了在線演示連接，祝你閱讀愉快！

知識點篇

01.🔢CSS計數器的使用

演示地址： codepen

02.📝文本縮進，塊級用text-indent，內聯用margin-left

03.📖美化表格經常使用技巧。等比、定寬、錯色等

演示地址： codepen

04.👔滾動條樣式美化

05.👉使用文本對齊屬性值justify，實現相似彈性佈局的space-between效果

06.🐠使用selection選擇器自定義文本選區的高亮樣式

07.🏩grid-template設置網格模板，實現三列兩行佈局

08.🏠grid-gap設置網格間隙，包括行和列

09.🏡grid佈局，使用fr單位實現等比例分配空間。fr是分數（fraction）的縮寫

10.🏢grid佈局使用repeat函數，能夠少寫些代碼

11.🍧focus-within是爲數很少的一個，能夠由子操做父選擇器

演示地址： codepen

12.♐容易被忽視的target選擇器

特效原理篇

13.⚽使用變換實現簡單複合運動

14.🌈看見彩虹，吃定彩虹

演示地址： codepen

15.🙅人臉識別時用到的掃描圖，以前我司的一個需求

演示地址： codepen

16.🗿立體感按鈕

演示地址： codepen

17.🔄實現一個混沌動態背景

演示地址： codepen

18.💞環繞橢圓軌道旋轉。平移運動與圓周運動複合就能作到

演示地址： codepen

19.👓只用background就能實現簡單濾鏡效果

20.🐍蛇形邊框特效原理

演示地址： codepen

21.🎁讓你的女友動起來

演示地址： codepen

22.🌖一個div，實現天狗吃月亮

演示地址： codepen

23.🌖更簡單的方案，實現天狗吃月亮

演示地址： codepen

24.🌌畫個土星，像不像三分樣

演示地址1： codepen

演示地址2：codepen

25.🌈使用漸變，一個div畫Chrome的logo

演示地址： codepen

26.🉐一個div簡單畫銅錢

27.🃏切牌特效原理

演示地址： codepen

28.✂給clip-path應用動畫

演示地址： codepen

工具篇

29.🚀vscode裏是可使用Emmet語法的，敲tab鍵結束命令，^表示返回上一層級

語法說明

30.⛲查看頁面佈局小技巧，以爲很好用

書籤完整代碼

但願有所幫助。

也歡迎閱讀本人的《JS正則迷你書》。

本文完。