【组件】css - doodle
官网 https://css-doodle.com/
github https://github.com/css-doodle/css-doodle
-
原理： 基于
Shadow DOM v1和Custom Elements v1（自定义标签） -
Shadow DOM是HTML的一个规范 ，它允许浏览器开发者封装自己的HTML标签、CSS样式和特定的javascript代码，同时也可以让开发人员创建类似<video>这样的自定义一级标签
-
该组件通过其内部的规则（纯CSS）会生成一系列的div构建的CSS Grid。你可以使用CSS轻松地操作这些div（单元格，每个div就是一个单元格）来生成图案。生成的图案既可以是静态的，也可以是动态的。而其限制仅限于CSS本身的限制。
使用
- 效果不佳！
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.5.1/css-doodle.min.js"></script>
<css-doodle>
/* put your code here */
</css-doodle>
<script src="https://unpkg.com/css-doodle@0.5.1/css-doodle.min.js"></script>
3 npm
npm install css-doodle
/* import it */
import 'css-doodle';
api
- 了解官网api
api
方法
- 可以返回当前格子数
index({ count }) { - 当前行数
row({ x }) { - 当前列数
col({ y }) { - 总共格子树
size({ grid }) { - 总行数
['size-row']({ grid }) { - 总列数
['size-col']({ grid }) { - 随机从数组中选择一个值
pick({ context }) { - 从数组中按顺序选择
['pick-n']({ idx, context, position }) { - 从数组随机排列 然后 顺序显示
['pick-d']({ idx, context, position }) { - 最后一个被选择的数
['last-pick']({ context }) { - 创建多个
multiple: lazy((n, action) => { - 重复
repeat: lazy((n, action) => { - 从范围中 随机取数
rand({ context }) { - 最后一个随机数
['last-rand']({ context }) { - 把 hex 码转换成字符
hex() {
一些方法可以简写
var Func = alias_for(Expose, {
'multi': 'multiple',
'm': 'multiple',
'pn': 'pick-n',
'pd': 'pick-d',
'r': 'rand',
'p': 'pick',
'lp': 'last-pick',
'lr': 'last-rand',
'i': 'index',
// legacy names
'pick-by-turn': 'pick-n',
'max-row': 'size-row',
'max-col': 'size-col'
});
栗子
至于栗子 参照 官网 https://css-doodle.com/ 以及更多栗子
袁川大大的演讲【笔记】
举个官网的栗子看图！
image.png
代码如下
:doodle {
@grid: 50x1 / 80%;
}
@place-cell: center;
@size: calc(100% / @size() * @i());
transition: transform .2s ease;
transform: rotate(calc(@i() * 5deg));
border-radius: 30%;
border: 1px solid hsla(
calc(10 + 4 * @i()), 70%, 68%, @r(.8)
);
代码比较简短
了解部分的意思
- :doodle
选择css-doodle元素本身 - @grid
设置布局 即 50*1 代表 50个格子 在一个位置 - @place-cell
给元素定位 - @size
设置宽高 - @i
当前格子的index - @r
随机一个数 @(.8) 即为 0-0.8 的任意一个数
再随意加点动画
will-change: transform, opacity;
animation: scale-up 12s linear infinite;
animation-delay: calc(-12s / @size() * @i());
@keyframes scale-up {
0%{
transition: transform .2s ease;
transform: rotate(calc(@i() * 45deg));
opacity: 0;
}
100% {
opacity: 1;
}
}
结尾
有时间回来截动图，可到官网上 把上下代码连接到一起，然后查看效果！ 随意改点数字，然后就会发现停不下来了~
PS：部分函数源码
// 可以返回当前格子数
index({ count }) {
return _ => count;
},
// 当前行数
row({ x }) {
return _ => x;
},
//当前列数
col({ y }) {
return _ => y;
},
// 总共格子树
size({ grid }) {
return _ => grid.count;
},
//总行数
['size-row']({ grid }) {
return _ => grid.x;
},
// 总列数
['size-col']({ grid }) {
return _ => grid.y;
},
//
n({ idx }) {
return _ => idx || 0;
},
// 随机从数组中选择一个值
pick({ context }) {
return expand((...args) => (
context.last_pick = pick(args)
));
},
// 从数组中按顺序选择
['pick-n']({ idx, context, position }) {
let counter = 'pn-counter' + position;
return expand((...args) => {
if (!context[counter]) context[counter] = 0;
context[counter] += 1;
let max = args.length;
let pos = ((idx == undefined ? context[counter] : idx) - 1) % max;
return context.last_pick = args[pos];
});
},
// 从数组随机排列 然后 顺序显示
['pick-d']({ idx, context, position }) {
let counter = 'pd-counter' + position;
let values = 'pd-values' + position;
return expand((...args) => {
if (!context[counter]) context[counter] = 0;
context[counter] += 1;
if (!context[values]) {
context[values] = shuffle(args);
}
let max = args.length;
let pos = ((idx == undefined ? context[counter] : idx) - 1) % max;
return context.last_pick = context[values][pos];
});
},
// 最后一个被选择的数
['last-pick']({ context }) {
return () => context.last_pick;
},
multiple: lazy((n, action) => {
let result = [];
if (!action || !n) return result;
let count = clamp(n(), 1, 65536);
for (let i = 0; i < count; ++i) {
result.push(action(i + 1));
}
return result.join(',');
}),
// 重复
repeat: lazy((n, action) => {
let result = '';
if (!action || !n) return result;
let count = clamp(n(), 1, 65536);
for (let i = 0; i < count; ++i) {
result += action(i + 1);
}
return result;
}),
// 从范围中 随机取数
rand({ context }) {
return (...args) => {
let transform_type = args.every(is_letter)
? by_charcode
: by_unit;
let value = transform_type(rand).apply(null, args);
return context.last_rand = value;
};
},
// 最后一个随机数
['last-rand']({ context }) {
return () => context.last_rand;
},
网友评论