揭秘你可能忽视的CSS知识
发表时间: 2019-10-11 14:09
本篇还简单地做了归类,动画特效相对多一些。
需要说明的是,创建复杂特效非我本意,其中大部分都是一两个div就能实现的效果。主要目的是演示渐变、阴影、变换、动画等知识的综合应用。
知识点篇
01.CSS计数器的使用
02.文本缩进,块级用text-indent,内联用margin-left
03.使用文本对齐属性值justify,实现类似弹性布局的space-between效果
05.grid-template设置网格模板,实现三列两行布局
06.grid-gap设置网格间隙,包括行和列
07.grid布局,使用fr单位实现等比例分配空间。fr是分数(fraction)的缩写
08.grid布局使用repeat函数,可以少写些代码
09.focus-within是为数不多的一个,可以由子操作父选择器
10.容易被忽视的target选择器
11.使用变换实现简单复合运动
12.看见彩虹,吃定彩虹
13.立体感按钮
14.实现一个混沌动态背景
15.环绕椭圆轨道旋转。平移运动与圆周运动复合就能做到
16.只用background就能实现简单滤镜效果
17.蛇形边框特效原理
作者:老姚
链接:
https://juejin.im/post/5d9ec8b0518825651b1dffa3
来源:掘金