前端日常实战：125#视频演示如何使用纯CSS制作一个迷路的人独自行走的动画
时间：2023-04-02 11:55:12
HTML
效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击全屏预览链接。https://codepen.io/comehop??e/pen/MqpOdR/Interactivevideo这个视频是交互式的，你可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/czZnbsr源码下载每日前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个元素，分别代表头、身、脚：
中心显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(lightgray20%,whitesmoke);}定义容器尺寸：.man{width:12em;高度：33em；字体大小：10px；position:relative;}定义主色：.man{color:white;}绘制头部：.head{position:absolute;宽度：7em；高度：7em；背景颜色：currentColor；边界半径：50%；right:0;}绘制主体：.body{position:absolute;宽度：6.2em；高度：14.4em；背景颜色：currentColor；顶部：7em；border-radius:100%20%00;}画脚，现在只能看到一只脚，因为两只脚是重叠的，一会儿移动就能看到两只脚：.feet::before,.脚::after{内容：'';位置：绝对；宽度：4em；高度：1.4em；背景色：白色；底部：0；左：-1.6em；边界半径：1em80%0.4em0.4em；}用伪元素绘制阴影：.man::before{content:'';位置：绝对；宽度：12em；高度：0.8em；背景色：rgba(0,0,0,0.1);底部：-0.2em；左：-3em；border-radius:50%;}接下来添加动画效果添加行走动画，两只脚的动画时间交错：.feet::before,.feet::after{animation:feet-animation2sease-in-outinfinite;}.feet::after{animation-delay:1s;}@keyframesfeet-animation{20%{transform:translateX(3.4em)translateY(-1.6em)rotate(4deg);}30%{transform:translateX(4.6em)translateY(-1em)rotate(0deg);}40%{变换：translateX(5.6em)translateY(-0.6em)rotate(4deg);}44%{变换：translateX(5.6em)translateY(0)rotate(0deg);}}添加头部和身体起伏动画效果：.head,.body{animation:body-animation4sease-in-outinfinite;}@keyframesbody-animation{0%,100%{transform:translateY(0)skewX(-2度);}25%,75%{转换：translateY(0.5em)skewX(0deg);}50%{转换：translateY(0)skewX(0deg);}}增加阴影区域随身体运动变化的动画效果：.man::before{animation:shadow-animate4sease-in-outinfinite;}@keyframesshadow-animate{0%,50%,100%{transform：规模（1);}25%,75%{变换:scale(1.15);}}你完成了！
