CSS奇思妙想 -- 使用 CSS 创造艺术

本文属于 CSS 绘图技巧其中一篇。以前有过一篇：在 CSS 中使用三角函数绘制曲线图形及展现动画css

想写一篇关于 CSS 创造艺术的文章已久，本文主要介绍如何借助 CSS-doodle ，利用 CSS 快速创造美妙的 CSS 图形。前端

中心布局

本文的全部技巧都会围绕这个布局展开，属于一类技巧。git

首先，咱们须要这样一种中心布局。简单的 HTML 结构以下：github

<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，因此选取了这种水平垂直居中的方式），结果以下：ide

好吧，看着平平无奇，可是基于这种布局，咱们能够衍生出很是多有意思的图案。函数

改变元素大小

最简单的，就是咱们能够改变元素的大小。布局

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 个子元素，每一个子元素大小逐渐递增，很容易获得以下结果：动画

改变元素颜色

接着，咱们继续改变元素的颜色，让它呈现渐变颜色逐级递进，能够是边框颜色：idea

@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%) 表示每一个子元素宽高的大小（也能够单独设置高宽），@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-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

最后

本文到此结束，但愿对你有帮助 :)，想 Get 到最有意思的 CSS 资讯，千万不要错过个人公众号 -- iCSS前端趣闻 😄

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。