前言
现在很多地方都慢慢进入雪季了,很多地方都下雪了,由此作为灵感,我们这次来实现一下飘着的雪花,整体实现起来并不难。话不多说,我们直接进入正题。
效果预览
最终实现的效果如下所示。
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
实现,代码简单易懂。另外,感兴趣的小伙伴们还可以在现有基础上发散思维,比如增加点其他效果,或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享,互相学习。最后,完整代码在码上掘金里可以查看,如果有什么问题大家在评论区里讨论~