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

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>

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

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

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,分别为16div 元素设置了旋转的角度。

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

最后我们看到最里面的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 实现,代码简单易懂。另外,感兴趣的小伙伴们还可以在现有基础上发散思维,比如增加点其他效果,或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享,互相学习。最后,完整代码在码上掘金里可以查看,如果有什么问题大家在评论区里讨论~