本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。
鉴于时不时有童鞋翻我以前的沸点,因此,本系列收集了个人目前发过的所有CSS知识点动图,以便阅读。
两个月前,曾发过一篇《你未必知道的49个CSS知识点》,已有3000多赞,这里,老姚真心谢谢大家的支持。
本篇是第二季。与前一篇相比,每个动图都做了加速处理,看起来更流畅一些。
另外,本篇还简单地做了归类,动画特效相对多一些。
需要说明的是,创建复杂特效非我本意,其中大部分都是一两个div就能实现的效果。主要目的是演示渐变、阴影、变换、动画等知识的综合应用。
大部分提供了在线演示链接,祝你阅读愉快!
知识点篇
01.🔢CSS计数器的使用

02.📝文本缩进,块级用text-indent,内联用margin-left

03.📖美化表格常用技巧。等比、定宽、错色等

04.👔滚动条样式美化

05.👉使用文本对齐属性值justify,实现类似弹性布局的space-between效果

06.🐠使用selection选择器自定义文本选区的高亮样式

07.🏩grid-template设置网格模板,实现三列两行布局

08.🏠grid-gap设置网格间隙,包括行和列

09.🏡grid布局,使用fr单位实现等比例分配空间。fr是分数(fraction)的缩写

10.🏢grid布局使用repeat函数,可以少写些代码

11.🍧focus-within是为数不多的一个,可以由子操作父选择器

12.♐容易被忽视的target选择器

特效原理篇
13.⚽使用变换实现简单复合运动

14.🌈看见彩虹,吃定彩虹

15.🙅人脸识别时用到的扫描图,之前我司的一个需求

16.🗿立体感按钮

17.🔄实现一个混沌动态背景

18.💞环绕椭圆轨道旋转。平移运动与圆周运动复合就能做到

19.👓只用background就能实现简单滤镜效果

20.🐍蛇形边框特效原理

21.🎁让你的女朋友动起来

22.🌖一个div,实现天狗吃月亮

23.🌖更简单的方案,实现天狗吃月亮

24.🌌画个土星,像不像三分样

演示地址2:codepen
25.🌈使用渐变,一个div画Chrome的logo

26.🉐一个div简单画铜钱

27.🃏切牌特效原理

28.✂给clip-path应用动画

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

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

希望有所帮助。
也欢迎阅读本人的《JS正则迷你书》。
本文完。