前端日常实战：104#视频演示如何用纯CSS制作卡车装载机
时间：2023-03-30 23:34:38
CSS
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/vaPGRz互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cz32DUd源码下载前端日常实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器代表卡车，它包含的两个子元素分别代表head和exhaust；
代表道路：
显示在中间，并在道路和页面之间留出空间：body{margin:10%;padding-top:10%;}绘制卡车车厢：.truck{width:15em;高度：5em；字体大小：10px；背景色：#444；border-radius:0.4em;}使用伪元素绘制卡车的轮子：.truck{position:relative;}.truck::before,.卡车::之后{内容：'';位置：绝对；框大小：边框框；宽度：2em；高度：2em；背景色：#444；边框：0.1em纯白色；边界半径：50%；bottom:-1em;}.truck::before{left:0.6em;}.truck::after{right:0.6em;}绘制卡车的前部：.cab{position:absolute;宽度：3.3em；高度：2.5厘米；背景色：#333；左：-3.5em；底部：0；-radius:40%00.4em0.4em;}.cab::before{content:'';位置：绝对；宽度：2em；高度：1.5em；背景色：#333；顶部：-1.5em；:0;border-radius:100%000;}绘制前轮：.cab::after{content:'';位置：绝对；框大小：边框框；宽度：2em；高度：2em；背景色：#444；边框：0.1em纯白色；边界半径：50%；底部：-1em；left:0.5em;}绘制排气的初始状态：.smoke,.smoke::before,。抽烟：：在{内容：''之后；位置：绝对；宽度：1em；高度：1em；背景色：#333；右：-0.1em；底部：-0.5em；border-radius:50%;}增加Exhaust动画:.smoke{animation:smoke-12sinfinite;}.smoke::before{animation:smoke-22sinfinite;}.smoke::after{animation:smoke-32s无限；}@keyframessmoke-1{to{width:3em;高度：3em；右：-3em；底部：0.5em；}}@keyframessmoke-2{到{宽度：2.5em；高度：2.5em；右：-6em；底部：0.8em；}}@keyframessmoke-3{到{宽度：3.5em；高度：3.5em；右：-4em；底部：0.2em；漂移效果：.smoke{animation:drift2sinfinite,smoke-12sinfinite;}.smoke::before{animation:drift3sinfinite,smoke-23sinfinite;}.smoke::after{animation:drift4sinfinite,smoke-34sinfinite;}@keyframesdrift{0%,100%{filter:opacity(0);}15%{过滤器：不透明度（0.9）；}}增加卡车行驶的动画效果：.truck{animation:move5sinfinite;}@keyframesmove{0%{margin-left:90%;}50%{左边距：45%；}100%{左边距：0；}0%,100%{过滤器:不透明度(0);}10%,90%{过滤器:不透明度(1);}}增加卡行颠簸动画效果：.truck{animation:put-put2sinfinite,move10sinfinite;}@keyframesput-put{0%{顶部边距：0；高度：5em；}5%{顶部边距：-0.2em；高度：5.2em；}20%{顶部边距：-0.1em；高度：5em；}35%{顶部边距：0.1em；高度：4.9em；}40%{顶部边距：-0.1em；高度：5.1em；}60%{顶部边距：0.1em；高度：4.9em；}75%{顶部边距：0；高度：5em；}80%{顶部边距：-0.4em；高度：5.2em；}100%{顶部边距：0.1em；高度：4.9em；}}大功告成！
