css-doodle
CSS帮助我们以各种方式发挥创造力，今天，我们将把CSS创造力提升到一个新的水平。 我们将使用一个称为CSS Doodle的工具来创建一些很棒的重复模式。
CSS Doodle是一个Web组件，您可以像使用其他任何HTML标记（例如
CSS Doodle模式
如何安装CSS Doodle
要开始使用CSS Doodle，请前往css-doodle.com 。 在这里，您将找到代码示例以及可以使用它创建的事物的启发性演示。
在页面的“ 入门”部分下，您将看到库的CDN版本的链接，我们将抓取该链接并将其直接插入CodePen中以供使用：
https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js您可能还会选择其他两个选项，但这是我们在本教程中将采用的路线。
实际上，我们不需要编写任何JavaScript或任何CSS，我们所做的一切都将在HTML中进行。
演示＃1
在构建第一个演示时，我们将介绍基本的设置要求。
首先创建一个自定义的:doodle选择器，可以在其中添加各种属性。
:doodle {}
定义网格
下一步是定义网格。 我们可以在选择器中执行此操作，也可以在
:doodle {}
要么
:doodle {
@grid: 5x5;
}
让我们坚持后者。 请注意@符号，用于Doodle专用语法。 现在我们需要添加一些其他值，例如总大小和网格间距：
:doodle {
@grid: 5x5;
@size: 10rem;
grid-gap: 1px;
}
background-color: tomato;
我们的5x5网格具有1px的网格间隙，总宽度和高度为10rem ，并且具有tomato背景。
玩这些值，看看会得到什么。 例如，让我们更改单元格的数量，并在size上使用不同的度量单位（ vmax ），以帮助我们填充整个屏幕（ 1vmax等于视口宽度或视口高度的百分之一，具体取决于较大）：
控制CSS Doodle
我们在:doodle选择器中声明的所有内容都会对整个Doodle产生影响。 我们在:doodle选择器之外声明的所有内容都会影响每个单元格。
例如，我可以将转换属性与随机比例函数一起使用，因此每个像元在值.1和.9之间随机缩放：
transform: scale(@rand(.1,.9));这就是给我们的：
以这种方式使用随机函数非常有用，并且可以使我们生成各种很酷的模式。 我们采用同样的思维HSL格式的颜色，使用随机数字的色调，饱和度，亮度和阿尔法值（注意使用@r()这是一个简写@rand()但不完全一样）：
为什么不通过应用以下方法添加更多混乱：
- 随机
translate3d - 随机
border-radius - 改变网格间隙
将图案固定为背景
我们要做的最后一步是应用一些样式来修复图案，以便我们可以将其用作其他元素（例如，英雄方块）后面的背景。 为此，我们在
.doodle {
position: fixed;
z-index: -1;
}这是为网站英雄创建随机，独特背景图形的好方法。 试试吧！
演示＃2
让我们重新开始，使自己成为另一个模式。 我们将首先定义网格并为整个对象提供背景色：
:doodle {
@grid: 10 / 100vmax;
grid-gap: 4vmax;
background: #B2DFDB;
}
然后，我们将向每个单元格应用随机颜色，随机缩放比例和随机translate3d以更改每个单元格的位置。
:doodle {
@grid: 10 / 100vmax;
grid-gap: 4vmax;
background: #B2DFDB;
}
transform: scale(@rand(.1, 1.9)) translate3d(@r(150px), @r(200px), 0) rotate(@r(360deg));
background: hsla(@r(100), 85%, @r(90%, 100%), @r(.9));
应用基本形状
现在，这是最酷的部分。 CSS Doodle使我们可以访问基本形状的集合，所有这些形状都可以在CSS Doodle网页上找到 。 我们将在结束标记之前添加以下规则：
@shape: clover 5;这是最终结果！
演示＃3
对于我们的第三个演示，我们将添加一些新玩具。 我们将通过使用@pick函数从值列表中进行选择来确定每个单元格的颜色：
background: @pick(#29B6F6, #FDD835, #5E35B1, #FFCCBC, #E8EAF6, #B2DFDB, #1B5E20, #2979FF);然后，我们将应用“原始” CSS剪切路径，并对每个三边形多边形使用随机坐标：
clip-path: polygon(
@rand(50%) 0, 50% @rand(70%), 0 @rand(100%)
);最后，我们将使用一些CSS关键帧动画，并再次散布一些随机值以取得良好的效果！ 这些规则将产生永久的运动效果。
animation: test infinite @r(100s, 150s) linear;
@keyframes test {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);
}
100% {
transform: translate3d(0, 0, 0);
}查看最终结果！ 有关创建方式的更多详细信息，请参见视频版本的15:47标记。
演示＃4
我们的最后一个演示使用了很少的代码，但是像以前一样从一个基本的网格开始。
:doodle {
@grid: 25 / 100vmax;
}
然后，我们定义一个名为--hueCSS变量，其值将根据网格单元在网格中的位置而变化：
--hue: calc(100 + .5 * @row() * @col());然后在background属性中使用此变量来决定色调：
background: hsla(var(--hue), 50%, 70%, @r(.1, .9));通过剪切路径的形式进行最后的触摸，我们得到以下信息：
有关最终演示工作原理的详细信息，请观看19:46标记的视频教程。
结论
你知道“天空是极限”吗？ 在这种情况下，“ CSS是极限”！ 无论您使用CSS做什么，都可以将其应用于CSS Doodle。 玩得开心–我迫不及待想看到您创造的东西！
翻译自: https://webdesign.tutsplus.com/tutorials/how-to-draw-patterns-with-css-using-css-doodle--cms-33110
css-doodle