登录咖啡冒气
前言
这次趁着周末休息的时间，又弄了一个新的动画效果，用CSS实现的一个咖啡冒气效果。整个实现过程比较简单，大家可以先看到下面的效果预览部分，十分简单，没有花里胡哨的技巧。话不多说，咱们直接进入主题。
效果预览
最终实现的相关效果如下。
HTML部分
首先我们看到HTML部分，相关代码如下。
<div class="coffee">
<div class="vapor">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="cup"></div>
<div class="plate"></div>
</div>
这里创建了一个带有热气动画的咖啡杯视觉效果
CSS部分
首先我们看到类名为coffee的样式，相关代码如下。
.coffee {
display: flex;
flex-direction: column;
align-items: center;
height: calc(9em + 1em + 2em);
position: relative;
}
.coffee .cup {
width: 10em;
height: 9em;
background-color: white;
border-radius: 0 0 1.5em 1.5em;
position: relative;
}
在.coffee容器中使用Flexbox布局，通过flex-direction: column让子元素垂直排列，通过align-items: center让子元素水平居中，最后为内部绝对定位元素提供定位上下文。
在.coffee .cup杯子样式中，设置杯子宽度和高度以及杯子的颜色，然后再给杯子设置底部的圆角，最后通过position: relative为伪元素提供定位上下文。
接下来便是上面提到的伪元素的样式，相关代码如下。
.coffee .cup::before {
content: "";
position: absolute;
width: 100%;
height: 2em;
background-color: chocolate;
border: 0.5em solid white;
box-sizing: border-box;
border-radius: 50%;
top: -1em;
box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.5);
}
.coffee .cup::after {
content: "";
position: absolute;
width: 3em;
height: 3.5em;
border: 0.8em solid white;
border-radius: 50%;
top: 20%;
left: 80%;
}
这里主要使用伪元素 ::before 和 ::after 来绘制杯子的两部分。在.coffee .cup::before中，这个伪元素创建了杯子的杯身部分，杯身颜色为巧克力色，设置了白色边框，通过top: -1em向上偏移，使杯身部分露出，最后定义一个内部阴影，创造深度感。在.coffee .cup::after中，这个伪元素创建了杯子的把手部分，设置把手尺寸以及白色边框，形成环形把手，通过边框和圆形组合，创建出一个咖啡杯的环形把手。
综上所述，这里会创建一个具有巧克力色杯身、白色边框和右侧环形把手的咖啡杯视觉效果。
.coffee .vapor {
width: 7em;
height: 2em;
display: flex;
justify-content: space-between;
}
.coffee .vapor span {
width: 0.1em;
min-width: 1px;
background-color: white;
animation: evaporation 2s linear infinite;
filter: opacity(0);
}
这里创建了咖啡杯上方蒸汽飘动的动画效果。在.coffee .vapor中，设置了蒸汽容器的宽度和高度，并且使用flex布局让子元素均匀分布，两端对齐。
在.coffee .vapor span中，每个span代表一缕蒸汽，在这里应用名为 "evaporation"的动画，持续时间为2秒，速度曲线为匀速，并且无限循环。最后通过filter: opacity(0)让初始透明度为0（完全透明）。
这样就创造了咖啡杯上方热气腾腾的视觉效果。
最后我们看到这个效果的核心实现部分，相关代码如下。
.coffee .vapor span:nth-child(1) {
animation-delay: 0.5s;
}
.coffee .vapor span:nth-child(2) {
animation-delay: 0.1s;
}
.coffee .vapor span:nth-child(3) {
animation-delay: 0.3s;
}
.coffee .vapor span:nth-child(4) {
animation-delay: 0.4s;
}
.coffee .vapor span:nth-child(5) {
animation-delay: 0.2s;
}
@keyframes evaporation {
from {
transform: translateY(0);
filter: opacity(1) blur(0.2em);
}
to {
transform: translateY(-4em);
filter: opacity(0) blur(0.4em);
}
}
这里实现了咖啡蒸汽的动画效果，通过为每个蒸汽条设置不同的延迟和定义关键帧动画，创造出逼真的蒸汽飘散效果。
首先为5个蒸汽条（span元素）设置了不同的动画延迟，通过错开延迟让每个蒸汽条在不同的时间开始动画（0.1s到0.5s之间）。
然后在evaporation动画中，蒸汽从原始位置向上移动4em单位，从完全可见(opacity:1)渐变到完全透明(opacity:0)，然后从轻微模糊(blur:0.2em)到更加模糊(blur:0.4em)吗，最终在模拟蒸汽上升过程中逐渐扩散、变淡直至消失的自然现象。
所以整体工作流程就是5个白色细条水平均匀分布，每个细条在不同时间开始动画（通过不同的animation-delay）最终通过动画创造出连续不断的蒸汽效果。
总结
以上就是整个效果的实现过程了，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
