如果不是亲眼见到了代码，你很难想象这些动画效果是几十行css代码就可以实现的
css-doodle
这一切都是基于一个web component: css-doodle。
我们来看看官网的简介：
如此看来，css-doodle只是一个生成div的工具。那理论来说，只要我们会css，再按照css-doodle的规则来写css，是不是可以写出炫酷的效果了呢。那动手试试吧。
引入css-doodle
有安装npm和直接引入脚本两种方式。
- 引入脚本
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.1/css-doodle.min.js"></script>
- npm
npm install css-doodle
/* 引入 */
import 'css-doodle';
为了方便直接看到效果，我推荐用codepen来编码。网址：codepen.io/
我们可以在codepen中引入脚本，新建一个pen之后，点击html的设置按钮,在 JS => Add External Script 这里加上css-doodle脚本链接
这样就可以引入css-doodle了来创作了
案例分析
我们先来看一下官网的案例，再结合文档的说明，我们能否理解css-doodle的规则
doodle：:doodle 是一个特殊的选择器，用来表示元素本身。也就是说整个图形是一个doodle标签
grid：元素上的 grid 属性定义了网格的行数和列数，范围由 1 到 32。如果不设置这个值，或者设置为 0 时，默认是 1x1。
也就是说 @grid： 8 / 90% 定义了一个8X8的网格，长宽为90%
@shape：返回一个使用 clip-path 和 polygon() 生成的图形。
这里的 @shape： circle也就是将整个doodle切出一个圆形
接下来的 transition 就是常见的css的属性了，需要注意一下的是 @r ，@r 是 @rand的简写
@r：随机返回两个数字之间的一个值。
也就是说transition的delay在0到0.6s之间随机
下面的boder-redius 又是我们的老朋友了，需要提一下的是 @pick
@pick(v1, v2,...) ：从提供的参数中随机地取一个值。
这里的两组参数 100% ，0 和 0，100% 巧妙地利用了border，将每个gird的元素随机变成了两种方向的树叶
will-change 不必多说。transform: scale(@r(.25, 1.25));使每片树叶随机放大或缩小 0.25到 1.25。
最后的background也就是每片树叶的背景。
@row：返回当前单元格所在的行位置。
@col：返回当前单元格所在的列位置。
hsl我们知道是根据色相、饱和度、亮度、透明度四个参数来定义颜色的。那么当我们能获得每片叶子的行和列时，就可以根据叶子的位置来设置每片叶子的色相，从而形成渐变的效果。
看到这里，我们来打开控制台，看看分析是否正确
整个图形确实是由8X8的grid组成，并且由css的规则随机给cell的一些属性附上了参数。
总结
说到这里，其实我们可以看出，css-doodle之所以能写出漂亮的图案，是利用了随机图形和规则图形的巧妙组合。一个规则grid，加上一些随机的形状、颜色属性，就能创造出好看的图形。写到这里，突然感觉自己其实连css都没搞明白，前端最入门的知识css，其实钻研下去，也能玩出花来。
