揭秘你可能忽视的CSS知识

本篇还简单地做了归类，动画特效相对多一些。

需要说明的是，创建复杂特效非我本意，其中大部分都是一两个div就能实现的效果。主要目的是演示渐变、阴影、变换、动画等知识的综合应用。

知识点篇

01.CSS计数器的使用

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

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

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

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.蛇形边框特效原理

专栏

每天一个JS进阶小方法

作者：前端圈

9.9币

7人已购

查看

作者：老姚

链接：
https://juejin.im/post/5d9ec8b0518825651b1dffa3

来源：掘金