前言
这次带大家实现一个热气球效果。这个效果相比较之前的一些CSS特效，会稍微复杂一下，话不多说，我们直接进入主题，来实现一下这个效果。
效果预览
效果如下所示。
HTML部分
首先我们看到HTML部分，相关代码如下。
<figure class="balloon">
<div class="envelope">
<span></span>
<span></span>
</div>
<div class="basket">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</figure>
这里定义了一个气球（balloon）的结构和篮子（basket）。figure 元素使用 balloon 类表示这个元素是一个气球。 这同样是一个 div 元素，使用 basket 类表示这个元素是一个篮子，basket 中包含四个 span 元素。这些元素可能代表篮子的细节、图案或篮子的一部分。
综合起来，这里共同描述了一个气球的结构，包括了篮子的部分元素。
CSS部分
接着我们看到CSS部分，首先是ballon类。相关代码如下。
.balloon {
font-size: 16px;
width: 12em;
height: 19em;
display: flex;
flex-direction: column;
align-items: center;
animation: drift 2s infinite alternate;
}
@keyframes drift {
to {
transform: translateY(-10%);
}
}
这里定义了一个气球（balloon）的样式，并且定义了一个名为 drift 的关键帧动画。
在样式中：.balloon设置了气球的字体大小，气球的宽度和高度，并且使用 Flex 布局使得元素具有弹性的特性。然后将元素内部的子元素在垂直方向上排列，并且使得元素在垂直方向上居中对齐。
接着使用 animation: drift 2s infinite alternate;应用了名为 drift 的动画，2秒内完成一次，执行次数无限次，且来回运动。最终表示在动画的最终状态，元素沿 Y 轴向上移动自身高度的 10%。
综合起来，这段代码的效果是让气球在垂直方向上周期性地来回漂浮，营造出一种飘动的效果。
接着看到envelope的相关样式，相关代码如下。
.envelope {
position: relative;
width: inherit;
height: 16em;
overflow: hidden;
}
.envelope span {
position: absolute;
width: inherit;
height: 12em;
border-radius: 50%;
color: orange;
background-color: currentColor;
}
.envelope span::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10em 5.5em 0 5.5em;
border-style: solid;
border-color: currentColor transparent transparent transparent;
left: calc(50% - 5.5em);
top: 8.45em;
}
.envelope span:nth-child(2) {
transform: scaleX(0.4);
filter: brightness(0.85) contrast(1.4);
}
在这个样式中，.envelope设置为相对定位，是为了让内部的绝对定位元素以父元素为基准。然后将宽度继承父元素，高度为16em。当内容溢出时进行裁剪，这里用于将三角形进行裁剪处理。在.envelope span中，设置绝对定位，将元素边角设置成圆形，并且设置颜色样式，用于显示图案。在.envelope span::before中，通过 ::before 伪元素创建三角形的下部分，实际上通过border的特性来创建倒梯形效果。设置了边框的大小、样式和颜色，以及位置。最后通过设置 nth-child，将第二个span收缩和变色，为的是形成两幅图案的色彩叠加效果。最终这里实现了包括上下两个部分的图案。
接着看到篮子元素basket的相关样式，相关代码如下。
.basket {
position: relative;
width: 2em;
height: 3em;
}
.basket::before {
content: "";
position: absolute;
width: inherit;
height: 1.6em;
background-color: peru;
bottom: 0px;
border-radius: 0 0 0.5em 0.5em;
}
.basket::after {
content: "";
position: absolute;
width: 105%;
height: 0.3em;
background-color: saddlebrown;
top: 1.3em;
left: calc((100% - 105%) / 2);
border-radius: 0.3em;
}
.basket span {
position: absolute;
width: 0.1em;
height: 1.5em;
background-color: burlywood;
left: calc((var(--n) - 1) * 0.6em);
transform: rotate(calc(var(--r) * 7deg));
trasnform-origin: bottom;
}
这里描述了篮子（basket）的样式，包括篮子本身和细节元素（缆绳）。
在.basket中，设置为相对定位，并且设置了篮子的宽度和高度。然后通过 ::before 伪元素画出篮子的部分，用来表示篮子的下部，设置了内容为空、绝对定位、宽度和高度，并定义了底部的圆角边框。通过 ::after 伪元素画出篮子的顶边，设置了内容为空、绝对定位、宽度、高度、背景颜色和位置，绘制出篮子的顶部边缘。
在.basket span中设置了缆绳的样式，包括位置、宽度、高度、背景颜色和旋转等。通过使用var(--n)和var(--r)来为不同的span元素应用不同的位置和旋转角度。
最后通过nth-child为每个span元素应用上述设置，根据不同的n值调整位置和角度。
综合起来，这段代码描述了篮子以及篮子上的细节元素，通过伪元素和CSS变量来实现了篮子形状和细节的效果。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
