css-doodle 介绍
css-doodle 是 一个 用来绘制css图案的WEB组件， 其基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和css Grid创建任何你想要的图案（css 图案）。创建出来的图案你可以运用于Web 页面 中。
?该组件通过其内部的规则（纯css）会 生成 一系列的div构建的css Grid。你可以使用css轻松地操作这些div（单元格，每个div就是 一个 单元格）来 生成 图案。 生成 的图案既可以是静态的，也可以是动态的。而其限制仅限于css本身的限制。?
Build
# build css-doodle .js
npm run build
# generate css-doodle .min.js
npm run minify && npm run trim
# or just use make
make
一个 例子
下面是来自官网的 一个 例子，在html中引入以下 代码 ：
< css-doodle >
:doodle {
@grid: 7 / 100vmax;
background: #0a0c27;
}
@shape: c lov er 5;
background: hsla(
calc(360 - @index() * 4),
70%,68%,@rand(.8)
);
transform:
scale(@rand(.2,1.5))
translate(
@rand(-50%,50%),@rand(-50%,50%)
);
</ css-doodle >
网站地址 : https://css-doodle.com
GitHub: https://github.com/css-doodle/css-doodle
网站描述: 一个 制作Web图案的组件
css-doodle官方网站
官方网站： https://css-doodle.com
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。