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渲染。
Shader
因為是WebGL的部分,和CSS有些不同,在這裏暫不打算細講,先放兩個例子,有興趣的同學可以去研究,恰好最近還要介紹另外一個doodle
,即glsl-doodle,等到那時,我們再來詳細討論shader和WebGL的問題吧。
http://code.juejin.cn/pen/7091830678479699976
http://code.juejin.cn/pen/7091669983536611365
- Day1:用原生JS把你的設備變成一台架子鼓!
- 【零基礎】充分理解WebGL(七)
- 【零基礎】充分理解WebGL(六)
- 【零基礎】充分理解WebGL(五)
- 冷知識:不起眼但有用的String.raw方法
- 【零基礎】充分理解WebGL(四)
- 【零基礎】充分理解WebGL(三)
- 【零基礎】充分理解WebGL(二)
- 【零基礎】充分理解WebGL(一)
- css-doodle:如何讓CSS成為藝術?
- 創建合輯,將【碼上掘金】作為開源項目的demo庫使用
- 使用 babel 插件來打造真正的“私有”屬性
- 使用 Node.js 對文本內容分詞和關鍵詞抽取
- 用信號來控制異步流程
- 設計 Timeline 時間軸來更精確地控制動畫
- 簡單構建 ThinkJS Vue2.0 前後端分離的多頁應用
- 冷門函數之Math.hypot
- 你還在用charCodeAt那你就out了
- 巧用 currentColor 屬性來實現自定義 checkbox 樣式
- 在什麼情況下 a === a - 1 ?