css-doodle:如何讓CSS成為藝術?

語言: CN / TW / HK

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

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

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

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

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

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

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

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

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

```html

```

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

1651717772270.jpg

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

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

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

```html

```

1651718427453.jpg

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

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

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

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

1651719268512.jpg

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

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

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

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

1651719680924.jpg

隨機與重複

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

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

1651720537470.jpg

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

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

1651721285179.jpg

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

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

1651721589614.jpg

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

https://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)%);

1651722058044.jpg

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

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

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

Shader

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

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

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