纯css画咖啡杯本质是用div与伪元素通过border-radius堆叠实现，关键在杯身、杯耳、液面、热气四层的层级与弧度比例控制；杯身用border-radius: 40% 40% 50% 50%，杯耳::before用border-radius: 0 30px 30px 0，液面用border-radius: 50% 50% 0 0，热气用transform动画+will-change优化，移动端需box-sizing: border-box和相对定位，ie11需降级处理。
用纯CSS画咖啡杯，本质是堆叠伪元素和border-radius
不是靠SVG或Canvas，而是用div + ::before/::after + 大量border-radius值微调。关键不在“画得像”，而在控制好杯身、杯耳、液面、热气这四层的层级和弧度比例——杯身通常用border-radius: 50% / 60%模拟椭圆截面，太圆就变马克杯，太扁就成托盘。
- 杯身主体用
position: relative，高度设为200px左右，宽度略窄（比如120px），border-radius: 40% 40% 50% 50%让底部更收口 - 杯耳必须用
::before绝对定位在右侧，width: 40px; height: 60px;，再用border-radius: 0 30px 30px 0做出钩状弧度 - 液面用另一个
div盖在杯内，background: #8B4513（深咖啡色），border-radius: 50% 50% 0 0，高度约60%杯高 - 热气用
::after画三个小圆（width: 8px; height: 8px;），用box-shadow横向复制两份，再配合animation上浮
热气动画卡顿？别用top/left做位移
CSS动画中用top或left触发重排，尤其多层叠加时掉帧明显。热气粒子必须用transform: translateY() + opacity组合，且要加will-change: transform, opacity提前告知浏览器优化。
- 定义
@keyframes steam-rise：从transform: translateY(0) scale(1)到transform: translateY(-40px) scale(0.7) - 每个热气
::after设不同animation-delay（如0s、0.3s、0.6s），避免同步飘起 - 务必加
transform-origin: center bottom，否则缩放会偏移中心
移动端适配时杯耳错位？检查伪元素的定位基准
::before和::after默认以父容器内容盒（content box）为参考，但当你给杯体加了padding或border，又没设box-sizing: border-box，伪元素位置就会漂移。最稳做法是显式重置。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 杯体容器统一加
box-sizing: border-box - 杯耳
::before的right值别写死px，改用right: -15%（相对父宽），再配合transform: translateX(-50%)居中锚点 - 如果用
rem单位，确保根字体大小在移动端已适配（例如html { font-size: 16px; }，小屏下调到14px）
IE11里热气不显示？伪元素动画兼容性有硬伤
IE11支持::before/::after，但对animation作用于伪元素的支持极差——尤其是带transform的。真要兼容，得降级：把热气做成三个独立span，用JS控制class切换，或直接放弃动画，用静态模糊渐变模拟热气。
- 检测IE：用
@supports not (animation: test) {}包裹热气动画规则，里面写回退样式 - 避免在IE中用
will-change，它会导致IE11渲染异常甚至崩溃 - 如果项目强制要求IE11，建议整个咖啡杯用SVG替代，路径可控、缩放无损、动画更稳
最难调的其实是杯身和液面交界处的阴影过渡——box-shadow的inset参数稍一变动，就会让液体看起来像凝固或溢出。这里没有通用值，只能打开开发者工具反复拖动border-radius和box-shadow的spread值，盯住那个微妙的“湿润感”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
