css-doodle - 有点炫酷的css作图组件

2019-04-18 本文已影响0人槑小姐_1419

【组件】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;
    },

css-doodle - 有点炫酷的css作图组件

使用

api

栗子

举个官网的栗子看图！

结尾

猜你喜欢

热点阅读