前端日常实践：117#视频演示如何使用纯CSS在愤怒的小鸟中制作红火
时间：2023-04-02 13:03:27
HTML
效果预览。按右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/pOgEdO互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c86q9S3源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含6个元素，分别代表头、眼睛、眉毛、嘴巴、冠羽、尾巴：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:antiquewhite;}设置子元素的公共属性：.red*{position:absolute;}.red*::before,.red*::after{content:'';position:absolute;}定义容器大小:.red{width:12em;高度：11em；字体大小：16px；position:relative;}绘制头部的轮廓，并将stroke参数定义为变量，因为后面会用到：.red{--border:0.2emsolid#6a0306;}.head{width:inherit;身高：继承；背景色：#dc002d；订单半径：45%55%45%45%/55%60%40%45%；边框：var（--边框）；}用伪元素勾勒出眼睛的轮廓：.eyes::before,.eyes::after{width:2.4em;高度：2.6em；背景：白色；边界半径：50%；border:var(--border);}.eyes::before{top:3.7em;左：5.5em；z-index:1;}.eyes::after{top:3.8em;left:7.8em;}用径向渐变绘制眼球和瞳孔：.eyes::before,.eyes::after{background:radial-gradient(circleatcalc(var(--eyeball-left)+6%)48%,white0.1em,transparent0.1em),radial-gradient(circleatvar(--eyeball-left)48%,black0.5em,transparent0.5em),white;}.eyes::before{--眼球-left:65%;}.eyes::after{--eyeball-left:41%;}用伪元素画眉毛：.eyebrows::before,.eyebrows::after{height:1.1em;背景色：黑色；顶部：3.6em；z-index:2;}.??eyebrows::before{left:5em;变换：偏斜（12deg）；宽度：3.4em;}.e眉毛::之后{左：8.2em;变换：偏斜（-15deg）；width:3.1em;}画出嘴巴的轮廓：.mouth{width:2.8em;高度：2.8em；背景色：#fca90d；顶部：6em；左：7em；z-指数：3；边界半径：20%020%10%；变换：旋转（34deg）skewX（-15deg）；border:0.1emsolidblack;}用伪元素绘制出上下颚：.mouth::before{width:3.4em;高度：4em；边框：0.2em实心；顶部：-1.6em；左：-1.8em；边界半径：0040%0；变换：旋转（42度）；border-color:transparentblacktransparenttransparent;}画冠羽左侧：.hair{width:1.2em;高度：3em；背景色：#dc002d；边界半径：50%；边框：var（--边框）；顶部：-1.8em；左：2.8em；变换：旋转（-70deg）；border-bottom-color:transparent;}用伪元素绘制右边的冠羽：.hair::before{宽度：继承；身高：继承；背景色：继承；边界半径：继承；边界：继承；顶部：1em；左：0.8em；rotate(20deg);}使用伪元素覆盖冠部和羽毛的额外边缘：.hair::after{width:3em;高度：2em；背景色：#dc002d；边界半径：50%；顶部：2.3厘米；左：-1.5em；transform:rotate(70deg);}绘制尾部最长的羽毛：.tail{width:3em;高度：1em；背景色：黑色；顶部：40%；左：-1.8em；z-指数：-1；transform:rotate(15deg);}用伪元素绘制尾部较短的两根羽毛：.tail::before,.tail::after{width:inherit;高度：70%；背景色：黑色；left:0.6em;}.tail::before{transform:rotate(25deg);顶部：-0.4em；}.tail::after{变换：旋转（-20deg）；top:0.8em;}用伪元素绘制胸部羽毛：.head{overflow:hidden;}.head::before{width:inherit;身高：继承；背景色：#e3c4ab；边界半径：继承；顶部：65%；left:25%;}接下来画阴影增强立体感给头部添加阴影：.head{box-shadow:inset0.5em-0.5em0.3em0.2emrgba(0,0,0,0.2),inset-1em0.8em1.5em-0.5emrgba(237,178,144,0.7);}给眼睛添加阴影：.eyes::before{box-shadow:-0.2em0.2em0.2em0.3emrgba(0,0,0,0.2);}.eyes::after{box-shadow:0.2em0.2em0.4em0.3emrgba(0,0,0,0.1);}添加阴影到嘴巴：.mouth{box-shadow:inset0.2em-0.4em1emrgba(0,0,0,0.4),插入00.5em0.5emrgba(255,255,255,0.3);}你完成了！
