本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。

鉴于时不时有童鞋翻我以前的沸点，因此，本系列收集了个人目前发过的所有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

https://codepen.io/laoyao/pen/wvwgvoz

工具篇

29.vscode里是可以使用Emmet语法的，敲tab键结束命令，^表示返回上一层级

语法说明

30.?查看页面布局小技巧，觉得很好用

书签完整代码

https://codepen.io/laoyao/pen/gOOaOXM?editors=0010

希望有所帮助。

作者：老姚
原链接：https://juejin.im/post/5d9ec8b0518825651b1dffa3