这篇文章主要介绍了关于如何使用纯css实现一台咖啡机的效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
![3249943501-5b380236e0516_articlex[1].png](http://cdn.chuangxiangniao.com/2025/03/20250313063254806.png "https://cdn.chuangxiangniao.com/2025/03/20250313063254806.png")
![3249943501-5b380236e0516_articlex[1].png](https://cdn.chuangxiangniao.com/2025/03/20250313063254806.png "https://cdn.chuangxiangniao.com/2025/03/20250313063254806.png")
源代码下载
每日前端实战系列的全部源代码请从 github 下载：
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom，容器中包含机体、出水口、咖啡杯、按钮和咖啡：
登录后复制
居中显示：
立即学习“前端免费学习笔记（深入）”；
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right bottom, sandybrown, darkred);}
登录后复制
定义容器尺寸：
.coffee-machine { width: 15em; height: 15em; background-color: white; font-size: 20px; border-radius: 50%; border: 2em solid white;}
登录后复制
画出机体的外框：
.coffee-machine { position: relative; display: flex; justify-content: center;}.body { position: absolute; width: 8em; height: 12em; background-color: sandybrown; border-radius: 1.2em; top: 1.5em; border-right: 0.6em solid peru;}
登录后复制
用伪元素画出机体的中间部分：
.body::after { content: ''; position: absolute; width: 8em; height: 8em; background-color: darkslategray; top: 2em; border-right: 0.6em solid black;}
登录后复制
画出出水口：
.spout { position: absolute; width: 3em; height: 1em; background-color: white; top: 3.5em; border-radius: 0.5em; border-right: 0.5em solid silver;}
登录后复制
画出咖啡杯的杯体：
.cup { position: absolute; width: 3em; height: 2em; background-color: white; bottom: 3.5em; border-radius: 0 0 1.4em 1.4em; border-right: 0.5em solid silver;}
登录后复制
用伪元素画出咖啡杯的把手：
.cup::after { content: ''; position: absolute; width: 0.6em; height: 0.6em; border: 0.3em solid silver; border-radius: 50%; right: -1.2em; top: 0.2em;}
登录后复制
画出按钮：
.button { position: absolute; width: 1.2em; height: 1.2em; background-color: tomato; border-radius: 50%; bottom: 2em; right: 4.5em;}
登录后复制
画出咖啡：
.coffee::before,.coffee::after { content: ''; position: absolute; width: 0.7em; height: 5em; background-color: chocolate; top: 4.5em; left: calc((15em - 0.7em) / 2);}
登录后复制
接下来润色一下。
为咖啡机增加光影：
.coffee-machine { z-index: 1;}.coffee-machine::before,.coffee-machine::after { content: ''; position: absolute; width: 2em; height: 2em; border: 0.3em solid transparent; z-index: 2; border-radius: 50%; border-left-color: white; left: 3.8em;}.coffee-machine::before { top: 1.8em; transform: rotate(40deg);}.coffee-machine::after { bottom: 1.8em; transform: rotate(-40deg);}
登录后复制
定义咖啡流动的前半段动画，即咖啡从出水口流到杯中：
.coffee::before { animation: 2s linear infinite; animation-name: pouring-before; transform-origin: top;}@keyframes pouring-before { 0%, 20% { transform: scaleY(0); } 30%, 100% { transform: scaleY(1); } 70%, 100% { visibility: hidden; }}
登录后复制
定义咖啡流动的后半段动画，即出水口停止流出咖啡，剩余咖啡流到杯中：
.coffee::after { animation: 2s linear infinite; animation-name: pouring-after; transform-origin: bottom;}@keyframes pouring-after { 0%, 70% { visibility: hidden; transform: scaleY(1); } 80%, 100% { transform: scaleY(0); }}
登录后复制
大功告成！
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何用纯CSS 实现一个颜色卡的效果
以上就是如何使用纯CSS实现一台咖啡机的效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2895004.html
