|
本文屬于 CSS 繪圖技巧其中一篇。之前有過(guò)一篇：在 CSS 中使用三角函數(shù)繪制曲線圖形及展示動(dòng)畫(huà) 想寫(xiě)一篇關(guān)于 CSS 創(chuàng)造藝術(shù)的文章已久，本文主要介紹如何借助 CSS-doodle ，利用 CSS 快速創(chuàng)造美妙的 CSS 圖形。
中心布局本文的所有技巧都會(huì)圍繞這個(gè)布局展開(kāi)，屬于一類技巧。 首先，我們需要這樣一種中心布局。簡(jiǎn)單的 HTML 結(jié)構(gòu)如下： <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;
}
利用絕對(duì)定位和
好吧，看著平平無(wú)奇，但是基于這種布局，我們可以衍生出非常多有意思的圖案。
改變?cè)卮笮?/span>最簡(jiǎn)單的，就是我們可以改變?cè)氐拇笮 ?/span> CSS 代碼寫(xiě)著太累，所以我們簡(jiǎn)單的借助 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 個(gè)子元素，每個(gè)子元素大小逐漸遞增，很容易得到如下結(jié)果：
改變?cè)?a href="https://www." target="_blank">顏色接著，我們繼續(xù)改變?cè)氐?a href="https://www." target="_blank">顏色，讓它呈現(xiàn)漸變顏色逐級(jí)遞進(jìn)，可以是邊框顏色： @for $i from 1 to $count + 1 {
.g-box:nth-child(#{$i}) {
...
border-color: hsla(
calc(#{$i * 25}),
50%,
65%,
1
);
}
}
得到這樣的效果：
也可以是改變背景 @for $i from 1 to $count + 1{
.g-box:nth-child(#{$i}) {
...
background: hsla(
calc(#{$i * 25}),
50%,
65%,
1
);
z-index: #{$count - $i};
}
}
改變?cè)亟嵌?/span>好，接下來(lái)，就可以開(kāi)始變換角度了，我們利用 @for $i from 1 to $count + 1{
.g-box:nth-child(#{$i}) {
....
transform: rotate(#{$i * 7}deg);
}
}
效果如下：
OK，到這里，基本的一些概念就引入的差不多了，總而言之，利用多元素居中布局，改變?cè)氐拇笮 ?a href="https://www." target="_blank">顏色、透明度、角度、陰影、濾鏡、混合模式等等等等，只要你能想到的，都可以。 接下來(lái)，我們?cè)僖氡疚牡牧硗庖粋€(gè)主角 -- CSS-doodle 。 CSS-doodle 是一個(gè)基于 Web-Component 的庫(kù)。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁(yè)面，以實(shí)現(xiàn)各種 CSS 效果（或許可以稱之為 CSS 藝術(shù)）。 其最終效果的代碼，本質(zhì)是都還是 CSS。具體的一些概念可以點(diǎn)擊主頁(yè)看看，一看就懂。
使用 CSS-doole 實(shí)現(xiàn)多元素水平垂直居中布局我們將上面的布局利用 CSS-doodle 再實(shí)現(xiàn)一次，要實(shí)現(xiàn) 50個(gè)元素的居中對(duì)齊，只需要如下簡(jiǎn)單的聲明即可： <css-doodle>
:doodle {
@grid: 1x50 / 100vmin;
}
@place-cell: center;
</css-doodle>
上面的意思大概是，在 這樣可能看不出效果，我們?cè)俳o每個(gè)元素設(shè)置不同的大小，給它們都加上一個(gè)簡(jiǎn)單的 <css-doodle>
:doodle {
@grid: 1x50 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 2%);
border: 1px solid #000;
</css-doodle>
效果如下：
Oh No，眼睛開(kāi)始花了。這樣，我們就快速的實(shí)現(xiàn)了前面鋪墊時(shí)候利用 HTML 代碼和繁瑣的 CSS 生成的圖形效果。
CSS 藝術(shù)接下來(lái)，就開(kāi)始美妙的 CSS 藝術(shù)。
改變?cè)氐男D(zhuǎn)角度及邊框顏色我們利用上述代碼繼續(xù)往下，為了更好的展示效果，首先整體容器的底色改為黑色，接著改變?cè)氐男D(zhuǎn)角度。每個(gè)元素旋轉(zhuǎn) 代碼非常的短，大概是這樣： <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>
不太好看，接著，我們?cè)囍o每個(gè)元素，漸進(jìn)的設(shè)置不同的 <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，第一幅看上去還不錯(cuò)的作品出現(xiàn)了。 當(dāng)然，每一個(gè)不同的角度，都能產(chǎn)生不一樣的效果，通過(guò) CSS-doodle，可以快速生成不同隨機(jī)值，隨機(jī)產(chǎn)生不同的效果。我們稍微改變一下上述代碼，將 <css-doodle>
:doodle {
--rotate: @r(0, 360)deg;
}
transform: rotate(calc(@index() * var(--rotate)));
</css-doodle>
這樣，我們每次刷新頁(yè)面，就可以得到不同的效果了（當(dāng)然，CSS-doodle 做了優(yōu)化，添加短短幾行代碼就可以通過(guò)點(diǎn)擊頁(yè)面刷新效果），改造后的效果，我們每次點(diǎn)擊都可以得到一個(gè)新的效果：
CodePen Demo -- CSS Doodle - CSS Magic Pattern
background 顏色奇偶不同好，我們?cè)贀Q個(gè)思路，這次不改變 <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>
利用
還是一樣的思路，我們可以將隨機(jī)值賦予
CodePen Demo -- CSS Doodle - CSS Magic Pattern 當(dāng)然，在隨機(jī)的過(guò)程中，你也可以選取自己喜歡的，將它們保留下來(lái)。 CSS-doodle 支持多種方式的引入，在一頁(yè)中展示多個(gè)圖形，不在話下，像是這樣：
CodePen Demo -- CSS-doodle Pure CSS Pattern
規(guī)律總結(jié)小小總結(jié)一下，想要生成不同的圖案，其實(shí)只需要找到能夠生成不同線條，或者造型圖案圖形，將它們按照不同的大小，不同的旋轉(zhuǎn)角度，不同顏色及透明度疊加在一起即可。 這樣的話，一些可能的 idea：
OK，將上述想法付諸實(shí)踐，我們就可以得到利用各式線條繪制出來(lái)的各式圖形。它們可能是這樣：
當(dāng)然，每次的效果都可以做到隨機(jī)，只要我們合理利用好隨機(jī)的參數(shù)即可，你可以戳進(jìn)下面的 Demo 感受一下： CodePen Demo -- CSS-doodle Pure CSS Pattern
|
|
|
