简介
css-doodle 是一款基于 CSS Grid 的生成图形的工具库，通过简单的 CSS 语法就能够创建各种炫酷的图形效果。它可以在网页中加入类似画板的功能，实现随机动画、背景图案等多种应用。
安装
在命令行中通过 npm 安装：
npm install css-doodle
或者通过 yarn 安装：
yarn add css-doodle
基本用法
引入 css-doodle 后，在 HTML 中使用 <css-doodle> 自定义标签包裹 CSS 样式即可生成图形效果。
-- -------------------- ---- -------
--------- -----
------
------
---------- ------ ------------
------- --------------------------------------------
-------
------
------------
-- ---- --- -- --
------- -
------ - - -----
-
--- -
----------- ---- ----- -------- - -- -- ---- --- --
---------- ---------- ----- -------- - ---- -- ----- -------- - ---- - --
-
-------------
-------
-------上面的代码中使用 @grid 定义了一个 4 x 4 的网格，每一个网格都会应用 CSS 样式。而 div 则是一个单独的图形，其颜色和位置都是通过计算变量 --x 和 --y 来实现的。
高级用法
自定义方法
可以通过 @custom 关键字定义自己的函数，这些函数可以被后续的样式代码调用。
-- -------------------- ---- -------
------------
-- ------------- --
------- -------- -
------- ---- ---------- ---- --- --
-
-- ----------------- --
------- -
----------- -----
------ - - ----
-
--- -
----------- -----------
------ ----- ----------- - ---- --
------- ----- ----------- - ---- --
---------- ------ ----- --------------- - -- - ----------- -------- ----------
-
---------- ------ -
---- - ------- -- ----------- --- -
-- - ------- -- ----------- --- -
-
-------------上面的代码中定义了两个自定义函数 myscheme() 和 myanim()，分别是返回随机颜色和控制方块大小和颜色变化的函数。在 div 中通过调用这两个函数来生成最终的效果。
变量和循环
css-doodle 还支持变量和循环，可以进一步简化样式的编写。
-- -------------------- ---- -------
------------
-- -------- --
---- ------ -------- -------- -------- -------- -------
-- -------- --
---------- ------ -
---- - ---------- ------------- -
-- - ---------- --------------- -
-
------- -
----------- -----
------ - - ----
-
--- -
----------- -------------
---------- ------ ----- -------- - -- - ------ ---------
-
-------------上面的代码中使用 @var 定义了一个颜色列表，并在 div 中通过 pick() 方法随机选择一个颜色。同时还定义了一个旋转动画 rotate，在 `div
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37028