本文屬於 CSS 繪圖技巧其中一篇。之前有過一篇：在 CSS 中使用三角函式繪製曲線圖形及展示動畫
想寫一篇關於 CSS 創造藝術的文章已久，本文主要介紹如何藉助 CSS-doodle ，利用 CSS 快速創造美妙的 CSS 圖形。
中心佈局
本文的所有技巧都會圍繞這個佈局展開，屬於一類技巧。
首先，我們需要這樣一種中心佈局。簡單的 HTML 結構如下：
<div class="g-container">
<div class="g-box"></div>
<div class="g-box"></div>
<div class="g-box"></div>
<div class="g-box"></div>
<div class="g-box"></div>
</div>
.g-container {
position: relative;
width: 300px;
height: 300px;
}
.g-box {
position: absolute;
top:50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
width: 100%;
height: 100%;
border: 1px solid #000;
}
利用絕對定位和 margin，將元素全部水平垂直居中疊在一起（因為後面會用到 transform，所以選取了這種水平垂直居中的方式），結果如下：
好吧，看著平平無奇，但是基於這種佈局，我們可以衍生出非常多有意思的圖案。
改變元素大小
最簡單的，就是我們可以改變元素的大小。
CSS 程式碼寫著太累，所以我們簡單的藉助 pug HTML 模板引擎和 SASS。
div.g-container
-for(var i=0; i<10; i++)
div.g-box
$count: 10;
@for $i from 1 to $count + 1 {
.g-box:nth-child(#{$i}) {
--width: #{$i * 30}px;
width: var(--width);
height: var(--width);
margin-left: calc(var(--width) / -2);
margin-top: calc(var(--width) / -2);
}
}
容器下包含 10 個子元素，每個子元素大小逐漸遞增，很容易得到如下結果：
改變元素顏色
接著，我們繼續改變元素的顏色，讓它呈現漸變顏色逐級遞進，可以是邊框顏色：
@for $i from 1 to $count + 1 {
.g-box:nth-child(#{$i}) {
...
border-color: hsla(
calc(#{$i * 25}),
50%,
65%,
1
);
}
}
得到這樣的效果：
也可以是改變背景 background 的顏色：
@for $i from 1 to $count + 1{
.g-box:nth-child(#{$i}) {
...
background: hsla(
calc(#{$i * 25}),
50%,
65%,
1
);
z-index: #{$count - $i};
}
}
改變元素角度
好，接下來，就可以開始變換角度了，我們利用 transform，將元素旋轉不同的角度：
@for $i from 1 to $count + 1{
.g-box:nth-child(#{$i}) {
....
transform: rotate(#{$i * 7}deg);
}
}
效果如下：
OK，到這裡，基本的一些概念就引入的差不多了，總而言之，利用多元素居中佈局，改變元素的大小、顏色、透明度、角度、陰影、濾鏡、混合模式等等等等，只要你能想到的，都可以。
接下來，我們再引入本文的另外一個主角 -- CSS-doodle 。
CSS-doodle 是一個基於 Web-Component 的庫。允許我們快速的建立基於 CSS Grid 佈局的頁面，以實現各種 CSS 效果（或許可以稱之為 CSS 藝術）。
其最終效果的程式碼，本質是都還是 CSS。具體的一些概念可以點選主頁看看，一看就懂。
使用 CSS-doole 實現多元素水平垂直居中佈局
我們將上面的佈局利用 CSS-doodle 再實現一次，要實現 50個元素的居中對齊，只需要如下簡單的宣告即可：
<css-doodle>
:doodle {
@grid: 1x50 / 100vmin;
}
@place-cell: center;
</css-doodle>
上面的意思大概是，在 100vmin x 100vmin 大小的容器下，宣告一個 1x50 的 grid 網格佈局，利用 @place-cell: center 將它們全部水平垂直居中，也就是會疊加在一起。
這樣可能看不出效果，我們再給每個元素設定不同的大小，給它們都加上一個簡單的 border：
<css-doodle>
:doodle {
@grid: 1x50 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 2%);
border: 1px solid #000;
</css-doodle>
@size: calc(100% - @calc(@index() - 1) * 2%)表示每個子元素寬高的大小（也可以單獨設定高寬），@index是個變數，表示當前元素的序號，從 1 - 50，表示沒個元素分別為容器的 2% 高寬、4% 高寬一直到 100% 高寬。border: 1px solid #000就是正常的 CSS 程式碼，裡面沒有變數，作用於每一個元素
效果如下：
Oh No，眼睛開始花了。這樣，我們就快速的實現了前面鋪墊時候利用 HTML 程式碼和繁瑣的 CSS 生成的圖形效果。
CSS 藝術
接下來，就開始美妙的 CSS 藝術。
改變元素的旋轉角度及邊框顏色
我們利用上述程式碼繼續往下，為了更好的展示效果，首先整體容器的底色改為黑色，接著改變元素的旋轉角度。每個元素旋轉 30deg x @index。
程式碼非常的短，大概是這樣：
<css-doodle>
:doodle {
@grid: 1x100 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 30deg));
border: 1px solid #fff;
</css-doodle>
不太好看，接著，我們試著給每個元素，漸進的設定不同的 border 顏色，並且透明度 opacity 逐漸降低,，這裡我們會用到 hsla 顏色表示法：
<css-doodle>
:doodle {
@grid: 1x100 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 30deg));
border: 1px solid hsla(
calc(calc(100 - @index()) * 2.55),
calc(@index() * 1%),
50%,
calc(@index() / 100)
);
</css-doodle>
再看看效果：
Wow，第一幅看上去還不錯的作品出現了。
當然，每一個不同的角度，都能產生不一樣的效果，通過 CSS-doodle，可以快速生成不同隨機值，隨機產生不同的效果。我們稍微改變一下上述程式碼，將 transform 那一行改一下，引入了一個隨機值：
<css-doodle>
:doodle {
--rotate: @r(0, 360)deg;
}
transform: rotate(calc(@index() * var(--rotate)));
</css-doodle>
- 利用
@r(0, 360)deg，能隨機生成一個介於 0 到 360 之間的隨機數，後面可以直接跟上單位，也就變成了一個隨機角度值 transform: rotate(calc(@index() * var(--rotate)))，利用calc規則引入隨機生成的 CSS 變數，當然，再不重新整理頁面的前提下，每一次這個值都是固定的
這樣，我們每次重新整理頁面，就可以得到不同的效果了（當然，CSS-doodle 做了優化，新增短短几行程式碼就可以通過點選頁面重新整理效果），改造後的效果，我們每次點選都可以得到一個新的效果：
CodePen Demo -- CSS Doodle - CSS Magic Pattern
強烈建議你點進 Demo，自己點點滑鼠感受一下 :)
background 顏色奇偶不同
好，我們再換個思路，這次不改變 border 的顏色，而是通過選擇器控制奇數序號的元素和偶數序號的元素，分別給予它們不一樣的背景色：
<css-doodle>
:doodle {
@grid: 1x100 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 60deg));
background: rgba(0, 0, 0, calc((@index * 0.01)));
@even {
background: rgba(255, 255, 255, calc((@index * 0.01)));
}
</css-doodle>
利用 @even {} 可以快速選中偶數序號的元素，然後給他賦予白色底色，而奇數元素則賦予黑色底色，看看效果：
還是一樣的思路，我們可以將隨機值賦予 transform 的旋轉角度，利用黑白疊加，看看再不同角度下，都會有什麼效果：
CodePen Demo -- CSS Doodle - CSS Magic Pattern
當然，在隨機的過程中，你也可以選取自己喜歡的，將它們保留下來。
CSS-doodle 支援多種方式的引入，在一頁中展示多個圖形，不在話下，像是這樣：
CodePen Demo -- CSS-doodle Pure CSS Pattern
規律總結
小小總結一下，想要生成不同的圖案，其實只需要找到能夠生成不同線條，或者造型圖案圖形，將它們按照不同的大小，不同的旋轉角度，不同顏色及透明度疊加在一起即可。
這樣的話，一些可能的 idea：
- 只利用單向的 border 會是怎麼樣的呢？
- 出現的 border 都是
solid，如果換成是虛線dashed呢？或許可以再加上border-radius text-decoration也支援一些各式的下劃線，我們也可以利用它們試試
OK，將上述想法付諸實踐，我們就可以得到利用各式線條繪製出來的各式圖形。它們可能是這樣：
當然，每次的效果都可以做到隨機，只要我們合理利用好隨機的引數即可，你可以戳進下面的 Demo 感受一下：
CodePen Demo -- CSS-doodle Pure CSS Pattern
Clip-path 與 drop-shadow
嘿，說到創造不同的線條與圖案，就不得不提 CSS 裡另外兩個有意思是屬性。Clip-path 與 fitler: drop-shadow()。
嗯哼？什麼意思呢。我們來個簡單的 Demo，利用 Clip-path ，我們可以裁剪出不同的元素造型。譬如實現一個簡單的多邊形：
div {
width: 300px;
height: 300px;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
background: #333;
}
效果如下：
那麼利用這個思路，我們就可以嘗試利用 clip-path 裁剪出各種不同的造型進行疊加。
在 CSS-doodle Shapes 中，內建了非常多的 clip-path 圖形供我們選擇：
我們隨機選取一個：
套用上述的規則，嘗試著實現一個圖形：
<css-doodle>
:doodle {
@grid: 1x100 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
background: hsla(
calc(calc(100 - @index()) * 2.55),
calc(@index() * 1%),
65%,
calc(@index() / 100)
);
clip-path: @shape(
fill-rule: evenodd;
split: 200;
scale: .45;
x: cos(2t) + cos(π - 5t);
y: sin(2t) + sin(π - 5t);
);
</css-doodle>
這次沒有旋轉不同的角度，只是給每一層賦予不同的背景底色，能夠得到這樣的效果：
CodePen Demo -- CSS Doodle - CSS Magic Pattern
Clip-path 與 drop-shadow 創造不同線條
OK，上述是利用 Clip-path 創造了不同的圖案，那不同的線條怎麼得來呢？
別急。這就需要請出我們另外一個屬性 drop-shadow，利用 drop-shadow，可以給 Clip-path 裁剪出來的圖形創造不同的陰影，當然有一些結構上的限制，大概的虛擬碼如下：
div {
position: relative;
width: 300px;
height: 300px;
filter: drop-shadow(0px 0px 1px black);
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
background: #fff;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
}
我們需要將 filter: drop-shadow(0px 0px 2px black) 作用在利用了 clip-path 的元素的父元素之上，並且，利用了 clip-path: 的元素必須帶有 background，才能給裁剪元素附上陰影效果。
上述的程式碼如下：
OK，完美，這樣一來，我們就極大極大的豐富了我們的線條庫，再運用會上述的線條規則，一大波新的圖案應運而生。
CodePen Demo -- CSS-doodle Pure CSS Pattern - clip-path - drop-shadow
OK，限於篇幅，就不一一展開了，感興趣可以點進上述 Demo Fork 一份自己嘗試。還有非常多有意思的圖案等待挖掘生成。
最後，再來欣賞一下 CSS-doodle 作者，袁川袁老師利用上述技巧的作品：
CodePen Demo -- css doodle art
最後
本文到此結束，希望對你有幫助 :)
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。