前端日常实战：99#视频演示如何用纯CSS制作过山车装载机
时间：2023-04-02 19:30:05
HTML
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/KBxYZg/Interactivevideo这个视频是交互式的，你可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cagbkSL源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个元素，代表3个点：
居中显示:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(toright,silver,teal);}定义摩天轮的直径，其他长度使用这个值作为基本比例：.loader{--diameter:10em;}定义容器的大小，宽度是高度的两倍：.loader{--width:calc(var(--diameter)*2);宽度：var(--宽度)；height:var(--diameter);}定义了伪元素的共享属性：.loader{position:relative;}.loader::before,.loader::after{content:'';位置：绝对；bottom:0;}在底部绘制轨迹，并定义一个代表线条粗细的变量：.loader{--stroke-width:calc(var(--diameter)/40);颜色：白色；}.loader::before{宽度：继承；高度：var（--笔画宽度）；background-color:currentColor;}在中间画一个圆形轨道：.loader::after{box-sizing:border-box;宽度：var(--直径)；高度：var(--直径)；边框：var(--stroke-width)实心；边界半径：50%；left:25%;}画一个点并定义一个代表点直径的变量：.loader{--dot-diameter:calc(var(--diameter)/10);}.loaderspan{position:absolute;宽度：var(--点直径);高度：var(--点直径);背景颜色：currentColor；边界半径：50%；底部：var（--笔画宽度）；left:calc((var(--width)-var(--dot-diameter))/2);}添加圆点沿圆形轨道旋转的动画效果：.loaderspan{animation:rotating2slinearinfinite;--vertical-center:calc((var(--diameter)/2-var(--stroke-width)-var(--dot-diameter))*-1);transform-origin:50%var(--vertical-center);}@keyframesrotating{0%,10%{transform:rotate(0deg);}60%,100%{变换:旋转(-1turn);}}为圆点添加移动动画效果：.loaderspan{animation:run2slinearinfinite,rotating2slinear无限；}@keyframesrun{0%{left:calc(var(--dot-diameter)*-1);}10%,60%{左:calc((var(--width)-var(--dot-diameter))/2);}70%,100%{左:calc(var(--width));}}延迟动画2个点，使3个点看起来像彼此相邻的3个隔间：.loaderspan:nth-child(1){animation-delay:0.075s;}.loaderspan:nth-child(2){animation-delay:0.15s;}最后隐藏容器外部内容:.loader{overflow:hidden;}大功告成！
