前端日常实战：113#视频演示如何用纯CSS制作赛车加载器
时间：2023-04-06 00:21:04
HTML5
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/mGdXGJ互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c3qL7Sz源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解读定义dom，容器中包含一个.car元素，它的两个子元素分别代表body和wheels：
中心显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:#333;}定义集装箱尺寸和汽车颜色：.loader{width:11.7em;高度：4.2em；颜色：浅青色；position:relative;}绘制底盘：.car{position:absolute;宽度：继承；高度：2em；背景颜色：currentColor；顶部：1.5em；border-radius:05em1em0/04em1em0;}画尾巴:.car::before{content:'';位置：绝对；宽度：0；高度：0；边框：0.6em实心透明；左边框宽度：0；在：左；变换：旋转（-45deg）；top:-0.5em;}（此时有点像飞机，哈哈~~）绘制body:.body{position:absolute;宽度：7.5em；高度：3.5em；框大小：边框框；边框：0.4em实心；边界半径：3em4.5em00/3em4em00；顶部：-1.5em；left:1.2em;}用伪元素绘制Window:.body::before{content:'';位置：绝对；宽度：3.5em；身高：继承；背景颜色：currentColor；border-top-left-radius：继承；左：-0.4em；top:-0.4em;}绘制轮子的轮廓：.wheels::before,.wheels::after{content:'';位置：绝对；框大小：边框框；宽度：2.6em；高度：2.6em；背景色：#333；边界半径：50%；bottom:-1em;}画轮子:.wheels::before,.wheels::after{border:0.3emsolid#333;背景图像：线性渐变（135deg，透明45%，currentColor46%，currentColor54%，透明55%），线性渐变（90deg，透明45%，currentColor46%，currentColor54%，透明55%），线性渐变（45deg，透明45%，currentColor46%，currentColor54%，透明55%），线性渐变（0deg，透明45%%,currentColor46%,currentColor54%,transparent55%),radial-gradient(currentColor29%,transparent30%,transparent50%,currentColor51%);}左右轮定位：.wheels::before{left:1.2em;}.wheels::after{right:0.8em;}接下来制作动画效果添加表示风影的dom元素.strikes，包含5个子元素：
