前端日常实战：80#视频演示如何用纯CSS制作自行车车轮
时间：2023-04-02 19:06:43
HTML
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/XBXEPK互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cgkqnAz源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含6个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-image:linear-gradient(#555,#222);}画轮子：.wheel{width:9em;高度：9em；字体大小：25px；边框：0.4em实心#777；边界半径：50%；box-shadow:0000.5em#111;}定义辐条的样式：.wheel{display:flex;对齐项目：居中；证明内容：中心；}.wheelspan{位置：绝对；宽度：8em；高度：1em；边框：0.1em实心；border-color:#ccctransparent;}定义变量并绘制多个辐条：.wheelspan{transform:rotate(calc((var(--n)-1)*30deg));}.wheelspan:nth-child(1){--n:1;}.wheelspan:nth-child(2){--n:2;}.??wheelspan:nth-child(3){--n:3;}.wheelspan:nth-child(4){--n:4;}.wheelspan:nth-child(5){--n:5;}.wheelspan:nth-child(6){--n:6;}让轮子旋转：.wheelspan{animation:run4slinearinfinite;}@keyframesrun{to{transform:rotate(calc((var(--n)-1)*30度+360度));}}用伪元素在地面上画线：.wheel{position:relative;}.wheel::before{content:'';位置：绝对；宽度：15em；高度：0.2em；顶部：11em；背景图像：线性渐变（向右，银色0，银色4em，透明4em，透明5em，银色5em，银色10em，透明10em，透明12em，银色12em，银色14em，透明14em，透明15em）;}最后，让地面上的线条移动，形成车轮前进的效果：.wheel::before{background-position:15em;动画：run26s线性无限；}@keyframesrun2{to{background-position:-15em;}}你完成了！
