|
本文属于 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;
}
利用绝对定位和
好吧，看着平平无奇，但是基于这种布局，我们可以衍生出非常多有意思的图案。
改变元素大小最简单的，就是我们可以改变元素的大小。 CSS 代码写着太累，所以我们简单的借助 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
);
}
}
得到这样的效果：
也可以是改变背景 @for $i from 1 to $count + 1{
.g-box:nth-child(#{$i}) {
...
background: hsla(
calc(#{$i * 25}),
50%,
65%,
1
);
z-index: #{$count - $i};
}
}
改变元素角度好，接下来，就可以开始变换角度了，我们利用 @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>
上面的意思大概是，在 这样可能看不出效果，我们再给每个元素设置不同的大小，给它们都加上一个简单的 <css-doodle>
:doodle {
@grid: 1x50 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 2%);
border: 1px solid #000;
</css-doodle>
效果如下：
Oh No，眼睛开始花了。这样，我们就快速的实现了前面铺垫时候利用 HTML 代码和繁琐的 CSS 生成的图形效果。
CSS 艺术接下来，就开始美妙的 CSS 艺术。
改变元素的旋转角度及边框颜色我们利用上述代码继续往下，为了更好的展示效果，首先整体容器的底色改为黑色，接着改变元素的旋转角度。每个元素旋转 代码非常的短，大概是这样： <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>
不太好看，接着，我们试着给每个元素，渐进的设置不同的 <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，可以快速生成不同随机值，随机产生不同的效果。我们稍微改变一下上述代码，将 <css-doodle>
:doodle {
--rotate: @r(0, 360)deg;
}
transform: rotate(calc(@index() * var(--rotate)));
</css-doodle>
这样，我们每次刷新页面，就可以得到不同的效果了（当然，CSS-doodle 做了优化，添加短短几行代码就可以通过点击页面刷新效果），改造后的效果，我们每次点击都可以得到一个新的效果：
CodePen Demo -- CSS Doodle - CSS Magic Pattern
background 颜色奇偶不同好，我们再换个思路，这次不改变 <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>
利用
还是一样的思路，我们可以将随机值赋予
CodePen Demo -- CSS Doodle - CSS Magic Pattern 当然，在随机的过程中，你也可以选取自己喜欢的，将它们保留下来。 CSS-doodle 支持多种方式的引入，在一页中展示多个图形，不在话下，像是这样：
CodePen Demo -- CSS-doodle Pure CSS Pattern
规律总结小小总结一下，想要生成不同的图案，其实只需要找到能够生成不同线条，或者造型图案图形，将它们按照不同的大小，不同的旋转角度，不同颜色及透明度叠加在一起即可。 这样的话，一些可能的 idea：
OK，将上述想法付诸实践，我们就可以得到利用各式线条绘制出来的各式图形。它们可能是这样：
当然，每次的效果都可以做到随机，只要我们合理利用好随机的参数即可，你可以戳进下面的 Demo 感受一下： CodePen Demo -- CSS-doodle Pure CSS Pattern
|
|
|
