CSS奇思妙想——用CSS创造艺术

时间：2023-03-14 09:04:28 科技观察

这篇文章是CSS绘图技巧之一。之前有一篇文章：在CSS中使用三角函数绘制曲线图形并显示动画[1]想写一篇用CSS创作艺术的文章很久了。本文主要介绍如何使用CSS-doodle[2]快速创建神奇的CSS图形。居中布局本文所有的技巧都将围绕这种布局展开，属于一类技巧。首先，我们需要这样一个中心布局。一个简单的HTML结构如下：

.g-container{位置：相对;宽度：300px；height:300px;}.g-box{position:absolute;顶部：50%；左：50%；左边距：-150px；边距顶部：-150px；宽度：100%；高度：100%；border:1pxsolid#000;}使用绝对定位和margin，将所有元素横向和纵向堆叠在中间（因为后面要用到transform，所以选择这种横向和纵向居中的方式），结果如下：OK，看起来很不起眼，但是基于这个布局，我们可以衍生出很多有趣的图案。更改元素大小的最简单方法是我们可以更改元素的大小。CSS代码写起来太累，干脆就用pugHTML模板引擎和SASS。div.g-container-for(vari=0;i<10;i++)div.g-box$count:10;@for$ifrom1to$count+1{.g-box:nth-child(#{$i}){--width:#{$i*30}px;宽度：var(--宽度)；高度：var（--宽度）；左边距：calc(var(--width)/-2);顶部边距：calc(var(--width)/-2);}}容器包含10个子元素，每个子元素的大小逐渐增加。很容易得到如下结果：改变元素颜色接下来，我们继续改变元素的颜色，让它一步步呈现出渐变色，可以是边框颜色：@for$ifrom1to$count+1{.g-box:nth-child(#{$i}){...边框颜色：hsla(calc(#{$i*25}),50%,65%,1);}}得到这个效果：你也可以改变背景的颜色：@for$ifrom1to$count+1{.g-box:nth-child(#{$i}){...background:hsla(计算(#{$i*25}),50%,65%,1);z-index:#{$count-$i};}}改变元素的角度是好的。接下来，我们就可以开始改变角度了。我们使用transform将元素旋转到不同的角度：@for$ifrom1to$count+1{.g-box:nth-child(#{$i}){....transform:旋转(#{$i*7}deg);}}效果如下：CodePenDemo--CSSPattern[3]OK，到这里，基本的概念介绍的差不多了，总而言之，使用多元素居中布局，改变大小，颜色，透明度，角度，阴影元素的、滤镜、混合模式等等，只要你能想到的，都可以。接下来介绍本文的另一个主角——CSS-doodle。CSS-doodle[4]是一个基于Web-Component的库。可以让我们快速创建基于CSSGrid布局的页面，实现各种CSS效果（或许可以称之为CSS艺术）。其最终效果的代码本质上还是CSS。对于一些具体的概念，大家可以点击主页查看，一目了然。使用CSS-doole实现多元素水平垂直居中布局我们再用CSS-doodle实现一下上面的布局。要实现50个元素的居中对齐，只需要如下简单语句：:doodle{@grid:1x50/100vmin;}@place-cell:center;上面的意思大概就是，在100vminx100vmin大小的容器下，声明一个1x50的grid网格布局，使用@place-cell:center将它们水平和垂直居中，即它们将堆叠在一起。这可能不会有效，所以我们为每个元素设置不同的大小并为它们添加一个简单的边框：:doodle{@grid:1x50/100vmin;}@place-cell：中心；@size:计算(100%-@calc(@index()-1)*2%);border:1pxsolid#000;@size:calc(100%-@calc(@index()-1)*2%)表示每个子元素的宽高（高宽也可以单独设置），@index是一个变量，表示当前元素的序号，从1-50，表示每个元素是容器的2%高宽，4%高宽一直到100%高度和宽度。border:1pxsolid#000是普通的CSS代码，里面没有变量，作用在每个元素上的效果如下：哦不，我的眼睛开始模糊了。这样我们很快就实现了之前准备中使用HTML代码和繁琐的CSS生成的图形效果。CSS艺术接下来，美丽的CSS艺术。改变元素的旋转角度和边框颜色我们使用上面的代码继续往下。为了更好的展示效果，先将整个容器的背景色改为黑色，然后再改变元素的旋转角度。每个元素旋转30degx@index。代码很短，大致是这样的：:doodle{@grid:1x100/100vmin;}@place-cell：中心；@size:计算(100%-@calc(@index()-1)*1%);变换：旋转（计算（@index（）*30deg））；border:1pxsolid#fff;不太好看，那么，我们尝试给每个元素逐渐设置不同的边框颜色，不透明度逐渐降低，这里我们使用hsla颜色表示法：:doodle{@grid:1x100/100vmin;}@place-cell：中心；@size:计算(100%-@calc(@index()-1)*1%);变换：旋转（计算（@index（）*30deg））；border:1pxsolidhsla(calc(calc(100-@index())*2.55),calc(@index()*1%),50%,calc(@index()/100));再看看效果：所有的贴图都有一定的色差，可以点击进入演示中看看~哇，第一个好看的作品出现了。当然，每一个不同的角度都会产生不同的效果。通过CSS-doodle可以快速生成不同的随机值，随机产生不同的效果。让我们稍微改变一下上面的代码，改变变换线，并引入一个随机值：:doodle{--rotate:@r(0,360)deg;}transform:rotate(calc(@index()*var(--rotate)));使用@r(0,360)deg可以得到0到360之间的随机数随机生成，下面可以直接跟上单位，变成随机角度值变换：rotate(calc(@index()*var(--rotate)))，使用calc规则引入随机生成CSS变量，当然不要刷新页面在每次刷新这个值的前提下，我们每次刷新页面都能得到不同的效果（当然，CSS-doodle做了优化，只加了几行代码可以点击页面刷新效果），改造后每次点击都能得到一个新的效果：CodePenDemo--CSSDoodle-CSSMagicPattern[5]强烈建议点击进入Demo，自己点击鼠标感受一下：）背景色偶数和奇数好吧，我们再换个思路，这次我们不改变边框的颜色，而是控制奇数-nu通过选择器对元素和偶数元素进行组合，并赋予它们不同的背景颜色：:doodle{@grid:1x100/100vmin;}@place-cell：中心；@size:计算(100%-@calc(@index()-1)*1%);转换：旋转（计算（@index（）*60deg））；背景：rgba(0,0,0,calc((@index*0.01)));@even{背景：rgba(255,255,255,calc((@index*0.01)));}使用@even{}，可以快速选中偶数的元素，然后给它一个白色的背景色，而奇数的元素会给它一个黑色的背景色，看看效果:还是一样的思路，我们可以给tran赋随机值sform的旋转角度，使用黑白叠加，看看不同角度下会有什么效果：CodePenDemo--CSSDoodle-CSSMagicPattern[6]当然，在随机过程中，你也可以选择什么你喜欢，KeepthemCSS-doodle支持多种引入方式，在一个页面上显示多个图形，像这样：CodePenDemo--CSS-doodlePureCSSPattern[7]规则总结，如果你想生成不同的模式，你只需要找到不同的可以生成图案的线条或形状，按照不同的大小、不同的旋转角度、不同的颜色和透明度进行叠加即可。在这种情况下，一些可能的想法：只使用单向边界会是什么样子？出现的边框都是实线，如果换成虚线呢？说不定border-radiustext-decoration也可以支持一些我们也可以用它们来试试OK，把上面的思路付诸实践，就可以得到各种用各种线条绘制的图形。他们可能是这样的：当然，每次的效果都可以是随机的，只要我们善用随机参数，大家可以戳下面的demo感受一下：CodePenDemo--CSS-doodlePureCSSPattern【8]Clip-path和drop-shadow嘿，说到创建不同的线条和图案，我不得不提到CSS中另外两个有趣的属性。Clip-path和fitler：drop-shadow()。嗯？你是什??么意思？来个简单的demo，使用Clip-path，我们可以裁剪出不同的元素形状。例如，实现一个简单的多边形：div{width:300px;高度：300px；剪辑路径：多边形（50%0%、90%20%、100%60%、75%100%、25%100%、0%60%、10%20%）；background:#333;}效果如下：那么利用这个思路，我们可以尝试使用clip-path裁剪出各种形状进行叠加。在CSS-doodleShapes[9]中，有很多内置的clip-path图形供我们选择：我们随机选择一个：应用上面的规则，尝试实现一个图形：:doodle{@网格：1x100/100vmin；}@place-cell：中心；@size:计算(100%-@calc(@index()-1)*1%);背景：hsla(calc(calc(100-@index())*2.55),calc(@index()*1%),65%,calc(@index()/100));剪辑路径：@shape(填充规则：evenodd；拆分：200；比例：.45；x：cos(2t)+cos(π-5t)；y：sin(2t)+sin(π-5t)；);这次没有进行不同角度的旋转，只是给每一层赋予不同的背景背景色，就可以得到这样的效果：CodePenDemo--CSSDoodle-CSSMagicPattern[10]Clip-pathanddrop-shadowcreatedifferentlinesOK，上面是用Clip-path创建不同的pattern，请问不同的线是怎么弄的呢？不用担心。这就需要我们再求一个属性drop-shadow。使用drop-shadow，我们可以为Clip-path裁剪出的图形创建不同的阴影。当然，也有一些结构上的限制。大概的伪代码如下：div{position:relative;宽度：300px；高度：300px；过滤器：阴影（0px0px1px黑色）；＆::之后{内容：“”;位置：绝对；宽度：100%；高度：100%；左：0；右：0；背景：#fff；剪辑路径：多边形（50%0%、90%20%、100%60%、75%100%、25%100%、0%60%、10%20%）；}}我们需要对使用clip-path的元素的父元素应用filter:drop-shadow(0px0px2pxblack)，并且使用clip-path的元素必须有背景才能被裁剪元素有阴影效果附加到它。上面代码如下：OK，完美。这样一来，就大大丰富了我们的线条库，然后利用上面的线条规则，又涌现出一大批新的花样。CodePenDemo--CSS-doodlePureCSSPattern-clip-path-drop-shadow[11]好了，限于篇幅，我就不一一展开了。有兴趣的可以点击上面的DemoFork自己尝试一下。还有很多有趣的模式等待被挖掘和生成。最后，欣赏一下CSS-doodle的作者袁传老师[12]袁传老师使用以上技术的作品：CodePenDemo--cssdoodleart[13]本文到此结束，希望对大家有所帮助you:)参考资料[1]在CSS中使用三角函数绘制曲线图形和显示动画：https://github.com/chokcoco/iCSS/issues/72[2]CSS-doodle：https://css-doodle。com/[3]CodePen演示——CSS模式：https://codepen.io/Chokcoco/pen/ZEpdXKP[4]CSS-doodle：https://css-doodle.com/[5]CodePen演示——CSS涂鸦-CSS魔术图案：https://codepen.io/Chokcoco/pen/QWKXxgB[6]CodePen演示-CSS涂鸦-CSS魔术图案：https://codepen.io/Chokcoco/pen/poEXKmm[7]CodePen演示——CSS-doodle纯CSS模式：https://codepen.io/Chokcoco/pen/wvzLPoO[8]CodePen演示——CSS-doodle纯CSS模式：https://codepen.io/Chokcoco/pen/vYXogar[9]CSS-doodleShapes:https://css-doodle.com/shapes/[10]CodePenDemo--CSSDoodle-CSSMagicPattern:https://codepen.io/Chokcoco/pen/gOwNjBE[11]CodePenDemo--CSS-doodlePureCSSPattern-clip-path-drop-shadow:https://codepen.io/Chokcoco/pen/JjRgWVz[12]袁传:https://codepen.io/yuachuan[13]CodePenDemo——css涂鸦艺术：https://codepen.io/yuanchuan/pen/GxNoME[14]Github——iCSS：https://github.com/chokcoco/iCSS

上一篇：10个MySQL性能调优技巧_0

下一篇：OpenAI发布ChatGPT人工智能文本生成检测工具

CSS奇思妙想——用CSS创造艺术相关文章