你未必知道的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正则迷你书》。

本文完。