效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接预览全文屏幕。https://codepen.io/comehop??e/pen/VdOKQG互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c43ekUL源码下载前端日常实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含2个元素，分别代表怪物的身体和眼睛：/span>/div>设置背景色：body{margin:0;高度：100vh；background-color:black;}设置前景颜色:.monster{width:100vw;高度：50vh；background-color:lightcyan;}绘制怪物身体:.monster{position:relative;}.body{position:absolute;宽度：32vmin；高度：32vmin；背景颜色：蓝绿色；边界半径：43%40%43%40%；bottom:calc(-1*32vmin/2-4vmin);}定义怪物眼睛所在的容器：.eyes{width:24vmin;高度：5vmin；位置：绝对；底部：2vmin；左：calc(32vmin-24vmin-2vmin);}用伪元素画出怪物的眼睛：.eyes::before,.eyes::after{content:'';位置：绝对；宽度：5vmin；高度：5vmin；边框：1.25vmin纯白色；盒子大小：边框博X;border-radius:50%;}.eyes::before{left:4vmin;}.eyes::after{right:4vmin;}定义怪物光跳跃的动画，结合后面的动画效果，让它有弹性果冻：.body{动画：弹跳1s无限交替；}@keyframes弹跳{到{底部：calc(-1*32vmin/2-2vmin);}}让怪物的身体旋转：@keyframeswave{to{transform:rotate(360deg);}}让怪物四处游荡：.monster{overflow:hidden;}.body{left:-2vmin;动画：漫游5s线性无限交替，波浪3s线性无限，反弹1s无限交替；}.eyes{动画：漫游5s线性无限交替；}@keyframeswander{to{left:calc(100%-32vmin+2vmin);}}最后，让怪物的眼睛眨一下：.eyes::before,.eyes::after{animation:blink3sinfinitelinear;}@keyframesblink{4%,10%,34%,40%{transform:scaleY(1);}7%,37%{变换:scaleY(0);}}你完成了！
