css-doodle：如何讓CSS成為藝術？_十年蹤跡

最近打算花一點時間，寫一個系列，給大家介紹一些有趣的開源項目的基本原理，這算是第一篇文章。

今天要介紹的是袁川大佬的css-doodle項目，這是一個持續更新多年的優秀開源項目。早在2019年的css-conf上，我就有幸聽過袁川老師介紹這個項目，當時就感覺挺驚豔的，沒想到CSS可以做這樣的事情。更難能可貴的是，這個項目這幾年一直持續更新，增加了越來越多有趣的特性，還支持了WebGL。

這個項目到底是怎樣？為什麼説它非常驚豔，我們先通過幾個例子來直觀感受一下吧。

http://code.juejin.cn/pen/7094068058397868063

http://code.juejin.cn/pen/7091492208854958116

http://code.juejin.cn/pen/7091564805760221214

我們可以看到，這些有趣的圖案和動畫，本身是通過類似於寫自定義元素css-doodle內的CSS樣式規則來實現。

它的具體使用並不複雜，上手十分簡單，只要你理解CSS樣式，就能很容易寫出基本規則。

首先是使用@grid屬性來定義網格，網格是 M x N 的方格，css-doodle最小支持 1x1 最大支持 256x256的網格。

```html

```

以上規則定義了一個5X5的網格，容器最大的寬、高是8em。繪製出來的效果如下：

如果只是繪製網格，還是不能實現前面的那些效果，實際上css-doodle提供了一系列選擇器、內置變量與函數。

我們先嚐試修改一下上面的代碼：

演示地址👉🏻 http://code.juejin.cn/pen/7094069339829043207

```html

```

@index變量定義了網格的索引，@row @col定義了行列，你可以把上面代碼中的註釋去掉看看結果。

我們還可以把 @row、@col 作為函數選擇器使用，在上面的代碼裏添加：

css @row(3) { background: red; } @col(3) { background: red; }

這樣我們就可以把第三行、第三列選擇出來：

我們還可以通過@at函數選擇指定行列，比如：

css @at(4, 4) { background: orange; }

此外，css-doodle支持更加複雜的@match規則，例如：

css @match(@row > @col) { background: red; } @match(@row = @col) { background: orange; }

我們通過@rand方法可以生成隨機數，比如：

css background: hsl(@rand(0, 360), 50%, 50%); transform: rotate(@rand(0, 90)deg) scale(@rand(50, 90)%);

@pick、@pick-n、@pick-d等方法可以隨機或者順序選取其中的值。

css // background: @p(red,orange,blue,gray); // background: @pn(red,orange,blue,gray); background: @pd(red,orange,blue,gray);

除了這些以外，還可以用 @random （區別 @rand) 作為選擇器使用，比如下面的代碼選出網格中20%的元素：

css @random(.2) { background: black; }

有了隨機的能力，我們就可以來做一些更有趣的事情了，比如下面這個例子：

http://code.juejin.cn/pen/7091538736240197662

除了@rand函數，css-doodle還有一個類似的@rn函數，它是噪聲函數。

我們把前面例子的@rand換成@rn試一下：

css background: hsl(@rn(0, 360), 50%, 50%); transform: rotate(@rn(0, 90)deg) scale(@rn(50, 90)%);

通俗來説，噪聲是平滑後的隨機，我們換一個例子來更直觀地看一下：

http://code.juejin.cn/pen/7094092850039619598

隨機與噪聲都非常有用，尤其是在WebGL的效果裏面，恰好，現在css-doodle支持了shader，這樣我們就可以把隨機和噪聲的輸出作為texture用於webgl渲染。

因為是WebGL的部分，和CSS有些不同，在這裏暫不打算細講，先放兩個例子，有興趣的同學可以去研究，恰好最近還要介紹另外一個doodle，即glsl-doodle，等到那時，我們再來詳細討論shader和WebGL的問題吧。

http://code.juejin.cn/pen/7091830678479699976

http://code.juejin.cn/pen/7091669983536611365