前端日常实践：110#视频演示如何在愤怒的小鸟效果预览中使用纯CSS制作黑炮

居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:turquoise;}定义容器大小和伪元素的公共属性：.black-bomb{width:13em;高度：13em；字体大小：16px；}。黑色炸弹*::before,.black-bomb*::after{content:'';position:absolute;}绘制头部轮廓：.black-bomb{position:relative;}.head{position:absolute;宽度：继承；身高：继承；背景色：#0f1110；border-radius:45%55%45%55%/55%50%50%45%;}用伪元素画眼睛的轮廓：.eyes::before,.eyes::after{widt高：3.4em；高度：3.4em；背景色：#4e4e4e；border-radius:50%;}.eyes::before{top:2.7em;左：21%；}.eyes::after{top：2.5em；right:7%;}用径向渐变绘制眼球和瞳孔：.eyes::before,.eyes::after{background-image:radial-gradient(circleatvar(--left3)1.7em,white0.1em,transparent0.1em),radial-gradient(circleatvar(--left2)1.6em,black0.6em,transparent0.6em),radial-gradient(circleatvar(--left1)1.4em,white1em,transparent1em);}.eyes::before{--left1:2em;--left2:2.3em;--left3:2.4em;}.eyes::after{--left1:1.2em;--left2:0.9em;--left3:0.8em;}用伪元素画眉毛:.eyebrows::before,.eyebrows::after{width:5.3em;高度：0.8em；背景：#cb3c1a;}.eyebrows::before{top:2.3em;左：1em；变换：旋转（10度）；}.eyebrows::after{顶部：2.2em；右：-0.6em；transform:rotate(-10deg);}画出嘴巴的轮廓：.mouth{position:absolute;宽度：3.6em；高度：3.6em；背景色：#fca90d；顶部：4em；左：6.4em；边界半径：80%030%20%；变换：旋转（34度）；border:0.1emsolidblack;}使用伪元素绘制上下颌的边界：.mouth::before{width:2.6em;高度：5.7em；边框：0.2em实心；边界半径：80%0016%；变换：旋转（35度）；顶部：-1.1em；左：1.4em；color:transparenttransparenttransparentblack;}在胸部画羽毛：.head{overflow:hidden;}.head::before{width:inherit;身高：继承；背景色：#474642；边界半径：继承；顶部：76%；left:12%;}绘制皇冠和羽毛：.hair{position:absolute;宽度：1.4em；高度：5em；背景色：#0f1110；顶部：-3.8em；左：20%；边界半径：0040%40%/00100%100%;}.hair::before{width:80%;高度：1em；背景色：#ffc000；顶部：0.3em；left:10%;}调整冠羽形状:.hair{transform:rotate(-28deg)skewX(10deg)skewY(-50deg);}接下来绘制阴影，增强头部阴影的立体效果:.head{box-shadow:inset-1em0.5em1.5em-0.5emrgba(255,255,255,0.3);}.head::after{width:inherit;身高：继承；边界半径：继承；盒子阴影：插入0.5em-0.5em0.3em0.2emrgba(0,0,0,0.2);}给嘴添加阴影：.mouth{box-shadow:inset00.5em0.5emrgba(255,255,255,0.3),inset0.2em-0.5em1.2emrgba(0,0,0,0.5);}你完成了！