前端日常实践：98#视频演示如何在愤怒的小鸟效果预览中使用纯CSS制作一只绿猪
时间：2023-03-31 01:38:01
CSS
在当前页面点击右侧“点击预览”按钮进行预览，点击链接进行预览全屏显示。https://codepen.io/comehop??e/pen/VBGWqX互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cVweZAr源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个分别代表耳朵、眼睛和鼻子的元素：
中心显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景颜色：天蓝色；}设置伪元素的公共属性，后面很多地方都会用到：.pig::before,.pig::after,.pig*::before,.pig*::after{content:'';position:absolute;}定义容器的大小：.pig{width:12em;高度：10em；字体大小：20px；背景色：#50a032；border:0.2emsolid#2b4d13;}用圆角属性绘制头部轮廓：.pig{border-radius:50%50%50%50%/55%60%40%45%;}绘制轮廓鼻子：.pig{position:relative;}.nose{position:absolute;宽度：4.6厘米；高度：4em；背景色：#82b923；边框：0.1em实心#1d3c07；小号：50%50%45%45%/55%55%45%45%；顶部：3em；left:4.2em;}用伪元素画鼻孔：.nose::before,.nose::after{width:1.2em;背景色：#0f2d00；边界半径：50%；顶部：1.4em;}.nose::before{左侧：0.8em;height:1.8em;}.nose::after{right:0.8em;height:1.6em;}画出眼睛的轮廓：.eyes::before,.eyes::after{width:2.8em;高度：2.8em；背景：白色；边界半径：50%；边框：0.1em实心#193c09；top:3.6em;}.eyes::before{left:0.8em;}.eyes::after{right:0.3em;}用径向渐变画眼睛：.eyes::before,.eyes::after{background:radial-gradient(circleatvar(--eyeball-left)1.5em,black0.4em,transparent0.4em),white;}.eyes::before{--eyeball-left:1em;}.eyes::after{--eyeball-left:1.9em;}绘制内耳轮廓：.ears::before,.ears::after{width:0.8em;高度：0.9em；背景色：#2f6317；边框：0.1em实心#1d3a0d；边界半径：45%45%45%45%/55%45%55%45%;}.ears::before{top:0.3em;left:1.3em;}.ears::after{top:-1.1em;right:5.8em;}用阴影画外耳：.ears::before{color:#50a032;框阴影：0.4em0.7em0-0.2em，-0.2em0.7em0-0.1em，-0.6em0.5em0-0.2em，-0.1em-0.2em00.4em，-0.1em-0.2em00.6em#2b4d13；变换：旋转（-40度）；}.ears::after{颜色：#5cb739；box-shadow:0.3emtransform:rotate(-6deg);}用伪元素画眉毛：.pig::before,.pig::after{width:1.4em;高度：1em；border-top:0.5emsolid#0f2d00;顶部：2.3em；边界半径：50%50%00/40%40%00;}.pig::before{left:1.2em;变换：旋转（-20deg）；}.pig::after{right:1em;transform:rotate(25deg);}接下来设置阴影增加立体效果给头部添加阴影效果：.pig{box-shadow:inset-1.5em1em1.5em-0.5emrgba(255,255,255,0.3),inset0.5em-0.5em0.8em0.2emrgba(0,0,0,0.2);}给鼻子添加阴影效果:.nose{box-shadow:-0.1em0.5em0.2em0.1emrgba(68,132,36,0.6);}.nose::before,.nose::after{box-shadow:inset-0.3em-0.2em0.1em-0.1em#2d6b1f;}为眼睛添加阴影效果：.eyes::before,.eyes::after{box-shadow:inset0.3em-0.6em0.5em-0.2emrgba(0,0,0,0.3),-0.1em0.5em0.2em0.1emrgba(68,132,36,0.6);}大功告成！
