css-doodle
一、 入门
1. 安装
1.1. 直接下最新版本或直接从 CDN :
<script src = "https://unpkg.com/css-doodle@0.19.2/css-doodle.min.js" ></script>
<css-doodle >
/* 把你的代码放在这里 */
</css-doodle>
1.2. npm 或者 yarn导入
yarn add css-doodle
# or
npm install css-doodle
import 'css-doodle';
二、用法
css-doodle 的语法基于 CSS,并提供了几个额外的实用功能和速记属性。
1. 属性
1.1 grid
- 网格中的行数和列数由
grid
元素上的属性定义,范围从1到32。当没有给定值或 0 时,它的默认值为1x1。
<!--
grid="5" 这个是为x,y分布是5; 可以书写 grid="3 x 5" : 就是可以理解x为2,y为5的图形
grid-gap: 1px; /* 间隙为1px */
-->
<css-doodle grid="5">
:doodle {
grid-gap: 1px;
width: 8em;
height: 8em;
}
background: #60569e;
</css-doodle>
在n x m
如下的顺序*(列,行)或(X,Y)* 。以下grid
值的格式都是可识别的:
-
grid = "0"
-
grid = "5"
-
grid = "20"
-
grid = "5x7"
-
grid = "5 x 7"
-
grid = "5,7"
-
仅当网格为一维时,行或列限制为1024
<!--
@size: 8em; 意思就是说:宽高为8em; width: 8em; height: 8em;
width: @rand(5%, 100%): 思思为随便生成 宽度5 - 100%的宽
-->
<css-doodle grid="1x35">
:doodle {
grid-row-gap: 1px;
@size: 8em; /* width: 8em; height: 8em; */
}
background: #60569e;
width: @rand(5%, 100%); /* from 5% to 100% by random */
</css-doodle>
- 还可以直接在:doodle 里面写 grid
<!-- 我相信很多人看不懂:5 / 8em 是什么意思,我这里解释一下,
如:第一个5代表,x,y都是5 x 5的模式,只是简写了(这个是作者在下面没有提到的)
我们可以自己改造一下:
:doodle{
@grid: 2 x 5 / 8em
}
这个的意思是说,x为2,y为5的,然后是占 8em字节的宽度
-->
<css-doodle>
:doodle {
@grid: 5 / 8em;
}
background: #60569e;
transform: scale(@rand(.2, .9));
</css-doodle>
1.2 use的使用 参考MDN的写法
<style>
css-doodle {
--rule: (
@grid: 5 / 8em;
--d: @p(45deg, -45deg, 135deg, -135deg);
--lg: linear-gradient(@var(--d),#60569e 50%,transparent 0);
background:
@var(--lg) 0 0 / 100% 100%,
@var(--lg) 0 0 / 50% 50%;
);
}
</style>
<css-doodle use="var(--rule)"></css-doodle>
1.3. seed的使用
<css-doodle seed="2020">
:doodle {
@grid: 5 / 8em;
}
background: #60569e;
transform: scale(@rand(.2, .9));
</css-doodle>