前端日常实战：107#视频演示如何用纯CSS制作独眼怪
时间：2023-04-02 17:06:23
HTML
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览在全屏。https://codepen.io/comehop??e/pen/pZXzaY互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c3qbkh8源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含的子元素分别代表耳朵、眼睛和嘴巴，嘴里有牙齿：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(lightcyan,lightblue);}绘制怪物的轮廓：.monster{width:10em;高度：13em；字体大小：16px；颜色：蓝紫色；背景颜色：currentColor；border-radius:5em5em00/6em6em00;}画眼睛的轮廓：.monster{position:relative;}。眼睛{位置：绝对；宽度：6.5em；高度：6.5em；背景：白色；边界半径：77%77%77%77%/92%92%60%60%；:2em;左：计算（（10em-6.5em）/2）；box-shadow:0.2em0.9em0rgba(0,0,0,0.1);}用径向渐变画眼球和瞳孔：.eye{background:radial-gradient(circleat50%25%,white0.4em,transparent0.4em),radial-gradient(circleat50%40%,black1.7em,transparent1.7em),white;}画嘴Outline:.mouth{position:absolute;宽度：3em；高度：2.1em；背景色：黑色；边界半径：70%70%3.5em3.5em；底部：0.9em；left:calc((10em-3em)/2);}用伪元素画舌头：.mouth{overflow:hidden;}.mouth::before{content:'';位置：绝对；宽度：继承；高度：0.6em；背景色：番茄；边界半径：50%50%00；bottom:0;}画三颗牙齿中间的一颗：.tooth{position:absolute;顶部边框：0.8em纯白色；左边框：0.4em固体透明；border-right:0.4em固体透明;left:1.1em;}用伪元素画出左边的三颗牙齿右两颗：.tooth::before,.tooth::after{position:absolute;顶部边框：0.8em纯白色；左边框：0.4em固体透明；border-right:0.4em固体透明;left:1.1em;}.tooth::before{content:'';左：-1.1em；top:-0.8em;}.tooth::after{content:'';左：0.3em；top:-0.8em;}画出耳朵的形状：.ear{position:absolute;宽度：2.4em；高度：4.5em；top:-3em;}.ear::before{内容:'';位置：绝对；宽度：0.9em；身高：继承；背景颜色：currentColor；左：calc((2.4em-0.9em)/2);}.ear::after{content:'';位置：绝对；宽度：2.4em；高度：2.4em；顶部：-0.5em；背景颜色：currentColor；边界半径：50%；box-shadow:inset-0.3em-0.2em0rgba(0,0,0,0.1);}分别定位左耳和右耳：.ear{transform-origin:bottomcenter;变换：旋转（计算（10deg*var（--direction）））;}.ear.left{left:2em;--direction:-1;}.ear.right{ri右：2em；--direction:1;}接下来增加动画效果：增加身体轻微弹跳的效果：.monster{transform-origin:bottomcenter;动画：body-bounce1sinfinite;}@keyframesbody-bounce{50%{transform:scaleX(1.03)scaleY(0.97);}}增加耳朵轻微晃动的效果：.ear{animation:ears-shake5sinfinite;}@keyframesears-shake{50%{transform:rotate(calc(20deg*var(--direction)));}}添加眨眼效果：.eye{animation:eye-blink5sinfinite;}@keyframeseye-blink{0%,6%{transform:scaleX(1)scaleY(1);}3%{转换：scaleX(1.03)scaleY(0.1);}}你完成了！
