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的接口，但願你能用它創造出更多美麗驚豔的效果^-^。