需要说明的是，创建复杂特效非我本意，其中大部分都是一两个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.⛲查看页面布局小技巧，觉得很好用
希望有所帮助。