效果预览按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。https://codepen.io/zhang-ou/pen/xjXxoz可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。https://scrimba.com/c/cBm4eU9源代码下载请从 github 下载。https://github.com/comehope/front-end-daily-challenges/tree/master/013-hot-coffee-cup代码解读定义 dom，一个名为 coffee 的容器，其中包含一个名为 cup 的元素：<div class="coffee"> <div class="cup"></div></div>居中显示：html, body { height: 100%; align-items: center; justify-content: center; background-color: brown;}画出杯子主体：.coffee .cup { width: 10em; height: 9em; background-color: white; border-bottom-left-radius: 1.5em; border-bottom-right-radius: 1.5em;}用伪元素画出杯口：.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%;}dom 元素增加托盘：<div class="coffee"> <div class="cup"></div> <div class="plate"></div></div>画出托盘：.coffee { display: flex; flex-direction: column; align-items: center; height: calc(9em + 1em); position: relative;}.coffee .plate { width: 16em; height: 1em; background-color: white; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; bottom: -1px;}dom 元素增加杯中冒出的热气：<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>画出杯中冒出的热气：.coffee { height: calc(9em + 1em + 2em);}.coffee .vapor { width: 7em; display: flex; justify-content: space-between;}.coffee .vapor span { width: 0.1em; min-width: 1px; height: 2em; background-color: white;}定义热气冒出的动画：.coffee .vapor span { 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.2s;}大功告成！知识点border-bottom-left-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radiusborder-bottom-right-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radiusbox-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadowcalc() https://developer.mozilla.org/en-US/docs/Web/CSS/calctranslateY() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateYfilter https://developer.mozilla.org/en-US/docs/Web/CSS/filteranimation-delay https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
