如何用纯 CSS 创作一个冒着热气的咖啡杯

效果预览

在线演示

按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。

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-radius
• border-bottom-right-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius
• box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
• calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
• translateY() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY
• filter https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• animation-delay https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

原文地址：https://segmentfault.com/a/1190000014734039

如何用纯 CSS 创作一个冒着热气的咖啡杯

原文地址：https://www.cnblogs.com/lalalagq/p/9988463.html