一级黄色电影视频,婷婷五月天丁香网,无码网站18,影音先锋中文字幕av,A V免费在线播放,日屄在线免费视频,婷婷伊人大香蕉,影音先锋每日资源啪啪AV

本文屬于 CSS 繪圖技巧其中一篇。之前有過一篇：在 CSS 中使用三角函數(shù)繪制曲線圖形及展示動畫^[1]

想寫一篇關(guān)于 CSS 創(chuàng)造藝術(shù)的文章已久，本文主要介紹如何借助 ?CSS-doodle^[2] ，利用 CSS 快速創(chuàng)造美妙的 CSS 圖形。

中心布局

本文的所有技巧都會圍繞這個布局展開，屬于一類技巧。

首先，我們需要這樣一種中心布局。簡單的 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;
}

利用絕對定位和 margin，將元素全部水平垂直居中疊在一起（因為后面會用到 transform，所以選取了這種水平垂直居中的方式），結(jié)果如下：

好吧，看著平平無奇，但是基于這種布局，我們可以衍生出非常多有意思的圖案。

改變元素大小

最簡單的，就是我們可以改變元素的大小。

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 個子元素，每個子元素大小逐漸遞增，很容易得到如下結(jié)果：

改變元素顏色

接著，我們繼續(xù)改變元素的顏色，讓它呈現(xiàn)漸變顏色逐級遞進(jìn)，可以是邊框顏色：

@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，將元素旋轉(zhuǎn)不同的角度：

@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ....
        transform: rotate(#{$i * 7}deg);
    }
}

效果如下：

CodePen Demo -- CSS Pattern^[3]

OK，到這里，基本的一些概念就引入的差不多了，總而言之，利用多元素居中布局，改變元素的大小、顏色、透明度、角度、陰影、濾鏡、混合模式等等等等，只要你能想到的，都可以。

接下來，我們再引入本文的另外一個主角 -- CSS-doodle 。

CSS-doodle^[4] 是一個基于 Web-Component 的庫。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁面，以實現(xiàn)各種 CSS 效果（或許可以稱之為 CSS 藝術(shù)）。

其最終效果的代碼，本質(zhì)是都還是 CSS。具體的一些概念可以點擊主頁看看，一看就懂。

使用 CSS-doole 實現(xiàn)多元素水平垂直居中布局

我們將上面的布局利用 CSS-doodle 再實現(xiàn)一次，要實現(xiàn) 50個元素的居中對齊，只需要如下簡單的聲明即可：

<css-doodle>
?:doodle?{
??@grid:?1x50?/?100vmin;
?}
?@place-cell:?center;
css-doodle>

上面的意思大概是，在 100vmin x 100vmin 大小的容器下，聲明一個 1x50 的 grid 網(wǎng)格布局，利用 @place-cell: center 將它們?nèi)克酱怪本又校簿褪菚B加在一起。

這樣可能看不出效果，我們再給每個元素設(shè)置不同的大小，給它們都加上一個簡單的 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%) ?表示每個子元素寬高的大小（也可以單獨設(shè)置高寬），@index 是個變量，表示當(dāng)前元素的序號，從 1 - 50，表示每個元素分別為容器的 2% 高寬、4% 高寬一直到 100% 高寬。
border: 1px solid #000 就是正常的 CSS 代碼，里面沒有變量，作用于每一個元素

效果如下：

Oh No，眼睛開始花了。這樣，我們就快速的實現(xiàn)了前面鋪墊時候利用 HTML 代碼和繁瑣的 CSS 生成的圖形效果。

CSS 藝術(shù)

接下來，就開始美妙的 CSS 藝術(shù)。

改變元素的旋轉(zhuǎn)角度及邊框顏色

我們利用上述代碼繼續(xù)往下，為了更好的展示效果，首先整體容器的底色改為黑色，接著改變元素的旋轉(zhuǎn)角度。每個元素旋轉(zhuǎn) 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>

不太好看，接著，我們試著給每個元素，漸進(jìn)的設(shè)置不同的 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>

再看看效果：

所有貼圖都存在一定色差，可以點進(jìn) Demo 里看看~

Wow，第一幅看上去還不錯的作品出現(xiàn)了。

當(dāng)然，每一個不同的角度，都能產(chǎn)生不一樣的效果，通過 CSS-doodle，可以快速生成不同隨機(jī)值，隨機(jī)產(chǎn)生不同的效果。我們稍微改變一下上述代碼，將 transform 那一行改一下，引入了一個隨機(jī)值：


?:doodle?{
??--rotate:?@r(0,?360)deg;
?}
?transform:?rotate(calc(@index()?*?var(--rotate)));

利用 @r(0, 360)deg，能隨機(jī)生成一個介于 0 到 360 之間的隨機(jī)數(shù)，后面可以直接跟上單位，也就變成了一個隨機(jī)角度值
transform: rotate(calc(@index() * var(--rotate)))，利用 calc 規(guī)則引入隨機(jī)生成的 CSS 變量，當(dāng)然，再不刷新頁面的前提下，每一次這個值都是固定的

這樣，我們每次刷新頁面，就可以得到不同的效果了（當(dāng)然，CSS-doodle 做了優(yōu)化，添加短短幾行代碼就可以通過點擊頁面刷新效果），改造后的效果，我們每次點擊都可以得到一個新的效果：

CodePen Demo -- CSS Doodle - CSS Magic Pattern^[5]

強(qiáng)烈建議你點進(jìn) Demo，自己點點鼠標(biāo)感受一下 :)

background 顏色奇偶不同

好，我們再換個思路，這次不改變 border 的顏色，而是通過選擇器控制奇數(shù)序號的元素和偶數(shù)序號的元素，分別給予它們不一樣的背景色：

<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 {} 可以快速選中偶數(shù)序號的元素，然后給他賦予白色底色，而奇數(shù)元素則賦予黑色底色，看看效果：

還是一樣的思路，我們可以將隨機(jī)值賦予 transform 的旋轉(zhuǎn)角度，利用黑白疊加，看看在不同角度下，都會有什么效果：

CodePen Demo -- CSS Doodle - CSS Magic Pattern^[6]

當(dāng)然，在隨機(jī)的過程中，你也可以選取自己喜歡的，將它們保留下來。

CSS-doodle 支持多種方式的引入，在一頁中展示多個圖形，不在話下，像是這樣：

CodePen Demo -- CSS-doodle Pure CSS Pattern^[7]

規(guī)律總結(jié)

小小總結(jié)一下，想要生成不同的圖案，其實只需要找到能夠生成不同線條，或者造型圖案圖形，將它們按照不同的大小，不同的旋轉(zhuǎn)角度，不同顏色及透明度疊加在一起即可。

這樣的話，一些可能的 idea：

只利用單向的 border 會是怎么樣的呢？
出現(xiàn)的 border 都是 solid，如果換成是虛線 dashed 呢？或許可以再加上 border-radius
text-decoration 也支持一些各式的下劃線，我們也可以利用它們試試

OK，將上述想法付諸實踐，我們就可以得到利用各式線條繪制出來的各式圖形。它們可能是這樣：

當(dāng)然，每次的效果都可以做到隨機(jī)，只要我們合理利用好隨機(jī)的參數(shù)即可，你可以戳進(jìn)下面的 Demo 感受一下：

CodePen Demo -- CSS-doodle Pure CSS Pattern ^[8]

`Clip-path` 與 `drop-shadow`

嘿，說到創(chuàng)造不同的線條與圖案，就不得不提 CSS 里另外兩個有意思是屬性。Clip-path 與 fitler: drop-shadow()。

嗯哼？什么意思呢。我們來個簡單的 Demo，利用 Clip-path ，我們可以裁剪出不同的元素造型。譬如實現(xiàn)一個簡單的多邊形：

div?{
????width:?300px;
????height:?300px;
????clip-path:?polygon(50%?0%,?90%?20%,?100%?60%,?75%?100%,?25%?100%,?0%?60%,?10%?20%);
????background:?#333;
}

效果如下：

那么利用這個思路，我們就可以嘗試?yán)?clip-path 裁剪出各種不同的造型進(jìn)行疊加。

在 CSS-doodle Shapes^[9] 中，內(nèi)置了非常多的 clip-path 圖形供我們選擇：

我們隨機(jī)選取一個：

套用上述的規(guī)則，嘗試著實現(xiàn)一個圖形：

<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>

這次沒有旋轉(zhuǎn)不同的角度，只是給每一層賦予不同的背景底色，能夠得到這樣的效果：

CodePen Demo -- CSS Doodle - CSS Magic Pattern^[10]

`Clip-path` 與 `drop-shadow` 創(chuàng)造不同線條

OK，上述是利用 Clip-path 創(chuàng)造了不同的圖案，那不同的線條怎么得來呢？

別急。這就需要請出我們另外一個屬性 drop-shadow，利用 drop-shadow，可以給 Clip-path 裁剪出來的圖形創(chuàng)造不同的陰影，當(dāng)然有一些結(jié)構(gòu)上的限制，大概的偽代碼如下：

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，完美，這樣一來，我們就極大極大的豐富了我們的線條庫，再運用會上述的線條規(guī)則，一大波新的圖案應(yīng)運而生。

CodePen Demo -- CSS-doodle Pure CSS Pattern ?- clip-path - drop-shadow^[11]

OK，限于篇幅，就不一一展開了，感興趣可以點進(jìn)上述 Demo Fork 一份自己嘗試。還有非常多有意思的圖案等待挖掘生成。

最后，再來欣賞一下 CSS-doodle 作者，袁川^[12]袁老師利用上述技巧的作品：

CodePen Demo -- css doodle art^[13]

最后

本文到此結(jié)束，希望對你有幫助 :)

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS^[14] ，持續(xù)更新，歡迎點個 star 訂閱收藏。

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

參考資料

[1]

在 CSS 中使用三角函數(shù)繪制曲線圖形及展示動畫: https://github.com/chokcoco/iCSS/issues/72

[2]

CSS-doodle: https://css-doodle.com/

[3]

CodePen Demo -- CSS Pattern: https://codepen.io/Chokcoco/pen/ZEpdXKP

[4]

CSS-doodle: https://css-doodle.com/

[5]

CodePen Demo -- CSS Doodle - CSS Magic Pattern: https://codepen.io/Chokcoco/pen/QWKXxgB

[6]

CodePen Demo -- CSS Doodle - CSS Magic Pattern: https://codepen.io/Chokcoco/pen/poEXKmm

[7]

CodePen Demo -- CSS-doodle Pure CSS Pattern: https://codepen.io/Chokcoco/pen/wvzLPoO

[8]

CodePen Demo -- CSS-doodle Pure CSS Pattern : https://codepen.io/Chokcoco/pen/vYXogar

[9]

CSS-doodle Shapes: https://css-doodle.com/shapes/

[10]

CodePen Demo -- CSS Doodle - CSS Magic Pattern: https://codepen.io/Chokcoco/pen/gOwNjBE

[11]

CodePen Demo -- CSS-doodle Pure CSS Pattern ?- clip-path - drop-shadow: https://codepen.io/Chokcoco/pen/JjRgWVz

[12]

袁川: https://codepen.io/yuanchuan

[13]

CodePen Demo -- css doodle art: https://codepen.io/yuanchuan/pen/GxNoME

[14]

Github -- iCSS: https://github.com/chokcoco/iCSS

END

精選推薦

「源碼剖析」如何實現(xiàn)一個虛擬DOM算法

前端簡報

29 Jan?2021

?中高級前端必須注意的40條移動端H5坑位指南 | 網(wǎng)易三年實踐
?使用Chrome擴(kuò)展程序生成網(wǎng)頁骨架屏
?前端：如何處理AJAX請求的重復(fù)使用
?Vue3 的學(xué)習(xí)教程匯總、源碼解釋項目、支持的 UI 組件庫、優(yōu)質(zhì)實戰(zhàn)項目
?虛擬DOM如何進(jìn)化為真實DOM

「CSS奇思妙想」使用 CSS 創(chuàng)造藝術(shù)

中心布局

改變元素大小

改變元素顏色

改變元素角度

使用 CSS-doole 實現(xiàn)多元素水平垂直居中布局

CSS 藝術(shù)

改變元素的旋轉(zhuǎn)角度及邊框顏色

background 顏色奇偶不同

規(guī)律總結(jié)

Clip-path 與 drop-shadow

Clip-path 與 drop-shadow 創(chuàng)造不同線條

最后

參考資料

`Clip-path` 與 `drop-shadow`

`Clip-path` 與 `drop-shadow` 創(chuàng)造不同線條