<dfn id="hx5t3"><strike id="hx5t3"><em id="hx5t3"></em></strike></dfn>

    <thead id="hx5t3"></thead><nobr id="hx5t3"><font id="hx5t3"><rp id="hx5t3"></rp></font></nobr>

    <listing id="hx5t3"></listing>

    <var id="hx5t3"></var>
    <big id="hx5t3"></big>

      
      

      <output id="hx5t3"><ruby id="hx5t3"></ruby></output>
      <menuitem id="hx5t3"><dfn id="hx5t3"></dfn></menuitem>

      <big id="hx5t3"></big>

        頭圖

        CSS奇思妙想 -- 使用 CSS 創造藝術

        chokcoco

        本文屬于 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);
            }
        }

        效果如下:

        CodePen Demo -- CSS Pattern

        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%) 表示每個子元素寬高的大?。ㄒ部梢詥为氃O置高寬),@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>

        再看看效果:

        所有貼圖都存在一定色差,可以點進 Demo 里看看~

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

        嘿,說到創造不同的線條與圖案,就不得不提 CSS 里另外兩個有意思是屬性。Clip-pathfitler: 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-pathdrop-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

        最后

        本文到此結束,希望對你有幫助 :),想 Get 到最有意思的 CSS 資訊,千萬不要錯過我的公眾號 -- iCSS前端趣聞 ??

        更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。

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

        閱讀 1.4k

        iCSS
        CSS 奇技淫巧,在這里,都有。

        坎坷切圖仔

        3.3k 聲望
        263 粉絲
        0 條評論

        坎坷切圖仔

        3.3k 聲望
        263 粉絲
        宣傳欄
        一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕