css涂鸦这样玩

前言

上一次深扒CSS的时候，还说CSS和H5绘制复杂图形很麻烦，看了大神的操作后，感觉茅塞顿开了，哈哈。

就算可能我暂时没有用到的机会，学习一下开发者的设计思路也是受益匪浅呀。

嗯，今天要介绍的是一个制作web图案的组件——css-doodle。

使用css-doodle可以很快的绘制一些规律性图形、动画。

使用css-doodle，只需要编辑10来行代码，就可以得到下面这些图案效果。

作者在他的codepen上放了很多实例，大家可以先去看看。

css-doodle挺受欢迎的，codepen上有它的画廊。

css-doodle官网:https://css-doodle.com/

原理

<css-doodle/>使用Custom Elements、Shadow DOM和CSS Grid来创建css图案。

Custom Elements（自定义元素）、Shadow DOM（影子节点）是前端框架的自定义组件中基本都会用到的