手把手教你实现一个飘雪花

一条会coding的Shark
176 阅读4分钟

前言

现在很多地方都慢慢进入雪季了，很多地方都下雪了，由此作为灵感，我们这次来实现一下飘着的雪花，整体实现起来并不难。话不多说，我们直接进入正题。

效果预览

最终实现的效果如下所示。

HTML部分

首先我们看到HTML部分。相关代码如下。

 <figure class="snowflake">
      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </figure>

这里描述了一个雪花图案的结构，使用了多个div和span元素来呈现雪花的形状。figure元素，使用snowflake类来描述这个元素属于雪花图案。多个div元素组成了雪花的每一部分，每个div代表了雪花的一个分枝。在每个div内部包含了多个span元素，这些span元素用于表示雪花的结构。

综合起来，这段代码展示了一个由多个div和span元素组成的结构，用于呈现一个雪花的形状。

CSS部分

接下来就是来给雪花添加相关样式了，我们一步步来解析。首先看到snowflake类，相关代码如下。

.snowflake {
      font-size: 100px;
      color: snow;
      width: 4em;
      height: 4em;
      display: flex;
      justify-content: center;
      animation: round 10s linear infinite;
    }
    @keyframes round {
      to {
        transform: rotate(1turn);
      }
    }

在.snowflake中，设置了字体大小，颜色，宽度以及高度，并且设置整体布局为弹性布局，居中显示。最后，在这里应用了一个名为 round 的动画，动画时长为 10s，线性运动，并且无限循环。在动画的最终状态，元素进行了1次完整的旋转，即旋转了360度。

综合起来，这里定义了一个雪花图案的样式，其中包括了字体大小、颜色、宽度、高度等设置，以及一个动画效果，使得雪花可以进行旋转，表现出更生动的视觉效果。

接下来看到里面的div元素的样式，相关代码如下。

  div {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 0.1em;
      height: 2em;
      background-color: currentColor;
      border-radius: 0.05em;
      position: absolute;
      transform-origin: bottom;
      transform: rotate(calc((var(--n) - 1) * 60deg));
    }
    div:nth-child(1) {
      --n: 1;
    }
    div:nth-child(2) {
      --n: 2;
    }
    div:nth-child(3) {
      --n: 3;
    }
    div:nth-child(4) {
      --n: 4;
    }
    div:nth-child(5) {
      --n: 5;
    }
    div:nth-child(6) {
      --n: 6;
    }

这里的作用用来创建雪花图案的样式。将 div 设置为弹性布局，指定了弹性容器内项目的排列方向为垂直方向，设置了项目在交叉轴上的对齐方式为居中。设置了 div 的宽度和高度，使用 currentColor 作为背景颜色，设置了边框的圆角半径。并且将 div 设置为绝对定位，设置了变换的原点在底部。

transform: rotate(calc((var(--n) - 1) * 60deg));表示通过 calc 函数结合自定义属性 --n，实现了每个 div 元素依次旋转一定角度。

最后通过 div:nth-child 以及自定义属性 --n，分别为1到6的 div 元素设置了旋转的角度。

综合起来，这段代码使用了CSS的Flex布局以及旋转变换，生成了构成雪花形状的符号元素。

最后我们看到最里面的sapn元素的样式，相关代码如下。

div span:nth-child(1) {
      width: 0.2em;
      height: 0.2em;
      background-color: currentColor;
      border-radius: 50%;
    }
    div span:nth-child(2),
    div span:nth-child(3),
    div span:nth-child(4),
    div span:nth-child(5) {
      width: var(--side-length);
      height: var(--side-length);
      border: 0.1em solid;
      border-width: 0.1em;
      border-style: none solid solid none;
      border-radius: 0.05em;
      transform: rotate(45deg);
    }
    div span:nth-child(2) {
      --side-length: 0.5em;
    }
    div span:nth-child(3) {
      --side-length: 0.4em;
    }
    div span:nth-child(4) {
      --side-length: 0.3em;
    }
    div span:nth-child(5) {
      --side-length: 0.3em;
    }
    div span:nth-child(2) {
      margin-top: -0.2em;
    }

这里定义了 div 元素内部的 span 子元素的样式，用于创建雪花图案的形状。

这里使用nth-child(1)设置了第一个 span 元素的样式，包括宽度、高度、背景色和圆角边框。接下来的div span:nth-child(2) / div span:nth-child(3) / div span:nth-child(4) / div span:nth-child(5)分别设置了第二到第五个 span 元素的样式，这些元素将被用来组成雪花的形状。这些样式包括了宽度、高度、边框样式、边框宽度、边框颜色、圆角边框和旋转变换。

通过 div span:nth-child 以及自定义属性 --side-length，为第二到第五个 span 元素设置了边框的宽度。

div span:nth-child(2)为第二个 span 元素设置了 margin-top 属性，用来调整其位置。

综合起来，这段代码描述了雪花图案的形状，它包含了中心的一个圆和围绕中心的四个旋转的矩形元素，通过span元素和div元素的结合共同构成了雪花的形状

总结

以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~

avatar
文章
阅读
粉丝