CSS奇思妙想—这里是CSS创造的世界！-CSDN博客

本文链接：https://blog.csdn.net/PC_372/article/details/114374037

本文介绍了如何使用CSS创造艺术图形，通过改变元素的大小、颜色、角度等，结合CSS-doodle库，实现多元素的水平垂直居中布局，创造出各种独特的视觉效果。文章提供了一系列实例和代码，展示了CSS在图形设计中的无限可能性。

摘要由CSDN通过智能技术生成

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

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