前端日常实践：66#视频演示如何使用纯CSS制作咖啡机
时间：2023-04-05 16:08:25
HTML5
效果预览点击右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览.https://codepen.io/comehop??e/pen/rKPLMW互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c6NzPfK源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解释定义dom，容器包含机体、壶嘴、咖啡杯、按钮和咖啡：
中心显示：身体{保证金：0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(torightbottom,sandybrown,darkred);}定义容器尺寸：.coffee-machine{width:15em;高度：15em；背景色：白色；字体大小：20px；边界半径：50%；border:2emsolidwhite;}绘制机器的框架：.coffee-machine{position:relative;显示：弹性；证明-content:center;}.body{position:absolute;宽度：8em；高度：12em；背景色：沙褐色；ius：1.2em；顶部：1.5em；border-right:0.6emsolidperu;}用伪元素绘制身体的中间部分：.body::after{content:'';位置：绝对；宽度：8em；高度：8em；背景色：深灰色；顶部：2em；border-right:0.6emsolidblack;}绘制喷口：.spout{position:absolute;宽度：3em；高度：1em；背景色：白色；顶部：3.5em；边界半径：0.5em；border-right:0.5emsolidsilver;}绘制咖啡杯主体：.cup{position:absolute;宽度：3em；高度：2em；背景色：白色；底部：3.5em；边界半径：001.4em1.4em；border-right:0.5emsolidsilver;}用伪元素绘制咖啡杯的把手：.cup::after{content:'';位置：绝对；宽度：0.6em；高度：0.6em；边框：0.3em纯银；边界半径：50%；右：-1.2em；top:0.2em;}绘制按钮：.button{position:absolute;宽度：1.2em；高度：1.2em；背景色：番茄；边界半径：50%；底部：2em；右：4.5em;}喝咖啡：。咖啡::之前，.咖啡::之后{内容：'';位置：绝对；宽度：0.7em；高度：5em；背景颜色：巧克力色；顶部：4.5em；左：calc((15em-0.7em)/2);}下一步抛光给咖啡机添加光影：.coffee-machine{z-index:1;}.coffee-machine::before,.coffee-machine::after{content:'';位置：绝对；宽度：2em；高度：2em；边框：0.3em实心透明；z-指数：2；边界半径：50%；左边框颜色：白色；left:3.8em;}.coffee-machine::before{top:1.8em;旋转（40度）；}.coffee-machine::after{底部：1.8em；transform:rotate(-40deg);}定义前半段咖啡流的动画，即咖啡从壶嘴流到杯子：.coffee::before{animation:2slinearinfinite;动画名称：倾倒之前；transform-origin:top;}@keyframespouring-before{0%,20%{变换:scaleY(0);}30%,100%{变换：scaleY(1);}70%,100%{可见性：隐藏；}}定义咖啡流出后半段的动画，即壶嘴停止流出咖啡，剩余的咖啡流入杯中：.coffee::after{animation:2slinearinfinite;动画名称：倒在后面；transform-origin:bottom;}@keyframespouring-after{0%,70%{能见度:隐藏;RM：规模Y（1）；}80%,100%{转换：scaleY(0);}}你完成了！
