css-doodle初认识

前言

css-doodle是一个用来绘制CSS图案的WEB组件，
请允许我先放上它的官网地址：https://css-doodle.com/
再请允许我放上组件的作者的codepen地址：https://codepen.io/yuanchuan/

以下是来自codepen中使用css-doodle制作出来的一些成品：

一个例子

下面是来自官网的一个例子，在HTML中引入以下代码：

<css-doodle>
  :doodle {
    @grid: 7 / 100vmax;
    background: #0a0c27;
  }

  @shape: clover 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>

效果如下图所示:

通过这个代码，我们大概能够看出一些东西！

布局

:doodle这个选择器选中的是<css-doodle>这个标签。
@grid的使用可以猜得到实质上它是用了CSS3的Grid布局，在控制台中就能看出这个布局，一行分了7个格子：

另外vmax这个单位也是CSS3中的表示尺寸的单位，意思是取宽度和高度大的那个作为标准（手机横放和竖放的时候会造成宽度和高度的改变），1vmax就是这个标准的1/100。
详见：http://www.css88.com/book/css...

@grid: 5x8 / 100% 100vh;

另外这样写的话，就代表5行8列，宽度为100%，高度为100vh；若只写一个，那么行列相同，宽度和高度也相同。

以下可以说明：

图案和渐变

@shape: clover 5;

官方拥有一个图案库：

没错啦，这个小花花就在这些图案里面。
颜色、尺寸还有平移位置也都设置了一个过渡的范围，这样就可以出现一种随机分布的效果。

添加字符

<css-doodle>
  :doodle {
    @grid: 20 / 100vmax;
    background: #12152f;
    font-family: sans-serif;
  }
  :after {
    content: '\@hex(@rand(0x2500, 0x257f))';
    font-size: 5vmax;
    color: hsla(
      @rand(360), 70%, 70%,
      @rand(.9)
    );
  }
</css-doodle>

效果图如下:

想插入文字的话，都是用了伪类来实现的，这里的content的字符编码是以下的一些，所以就有了成品中的那些“字图案”：

如何使用

可以引入CDN直接使用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js"></script>

也可以npm install css-doodle再import CSSDoodle from 'css-doodle'。
最后再推荐大漠老师写的文章，有更加详细的说明：一个制作Web图案的组件：css-doodle

除此之外，官网还有更多变量说明，也有JavaScript的接口，希望你能用它创造出更多美丽惊艳的效果^-^。