先来一杯热乎乎的咖啡吧。
<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>
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: brown;
}
.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 .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,.5);
}
.coffee .cup::after{
content:'';
position: absolute;
width: 3em;
height: 3.5em;
border:0.8em solid white;
border-radius: 50%;
top:20%;left:80%;
}
.coffee .plate{
width: 16em;
height: 1em;
background-color: white;
border-radius: 0 0 50% 50%;
position: absolute;
bottom: -1px;
}
.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);
}
@keyframes evaporation{
from{
transform: translateY(0);
filter: opacity(1) blur(0.2em);
}
to{
transform: translateY(-4em);
filter: opacity(0) blur(0.4em);
}
}
.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.2ss;
}
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
space-between 项目位于各行之间留有空白的容器内
flex-start 默认值。项目位于容器的开头
flex-end 项目位于容器的结尾
center 项目位于容器的中心
space-around 项目位于各行之前、之间、之后都留有空白的容器内
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。
可以参考 css语法结构
案例里：
如果设置成center，热气就变成中间一小束了
如果设置成flex-end，热气就变成只有右边一小束了
可以自己试验着，变成各种属性，看看变化，还是挺有意思的
网友评论