居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(torightbottom,silver,dimgray);}重新定义框模型：*,*::before,*::after{box-sizing:border-box;}定义容器大小：.container{width:150像素；高度：150px；背景色：雪；border-radius:50%;}绘制锅的最大部分：.container{display:flex;对齐项目：居中；证明内容：居中；}.pot{宽度：85px；高度：85px；背景颜色：深天蓝；border-radius:50%;}用伪元素绘制锅的上半部分：.pot{position:relative;}.pot::before{content:'';位置：绝对；宽度：85px；身高：43像素;背景色：艳粉色；border-radius:43px43px00;}用伪元素绘制喷口：.pot::after{content:'';位置：绝对；宽度：43px；高度：10px；背景色：艳粉色；左：21px；top:-3px;}绘制手柄的水平部分：.pot.handle{width:83px;高度：7px；背景色：黑色；边界半径：7px；位置：绝对；左：13px；top:12px;}使用伪元素绘制手柄的垂直部分：.pot.handle::before{content:'';位置：绝对；宽度：7px；高度：50px；背景色：黑色；边界半径：7px；左：calc(85px-7px);}下一步润色给锅添加阴影：.pot{border-right:5pxsolidsteelblue;}.pot::before{border-right:5pxsolidpalevioletred;}用伪元素给锅添加光影：.container::after{内容：'';位置：绝对；宽度：70px；高度：70px；边框：3px实心透明；左边框颜色：白色；边界半径：50%；左：40px；顶部：40px；transform:rotate(-10deg);}最后，添加动画：.container{animation:pouring3slinearinfinitealternate;}@keyframespouring{0%,25%{transform:rotate(0deg);}75%,100%{变换:旋转(-45deg);}}你完成了！