前端日常实践：69#视频演示如何使用纯CSS制作单元素投掷盒子的loader
时间：2023-04-03 01:10:33
HTML
效果预览。按右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/qKwXbx互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cD96VUM源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有1个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:teal;}Drawabar:.loader{width:6em;底部边框：0.25em纯白色；字体大小：30px；border-radius:0.125em;}在上面画一个伪元素Box:.loader{position:relative;}.loader::before{content:'';位置：绝对；宽度：1em；高度：1em；边框：0.25em纯白色；底部：0；左：0.5em；border-radius:0.25em;}让图案倾斜形成斜坡上的方框效果：.loader{transform:rotate(-45deg);左：1em；top:1em;}接下来，制作动画。让盒子一步步爬坡，爬到坡顶再爬：.loader::before{animation:push3sinfinite;}@keyframespush{0%{transform:translateX(0);}20%,25%{转换：translateX(1em);}40%,45%{转换：translateX(2em);}60%,65%{转换：translateX(3em);}80%{转换：translateX(0);爬坡时的滚动效果：@keyframespush{0%{transform:translateX(0)rotate(0deg);}20%,25%{transform:translateX(1em)rotate(calc(90deg*1));}40%,45%{transform:translateX(2em)rotate(calc(90deg*2));}60%,65%{transform:translateX(3em)rotate(calc(90deg*3));}80%{转换：translateX(0)rotate(0deg);}}在攀爬过程中增加盒子的拟人化效果：@keyframespush{0%{transform:translateX(0)rotate(0deg);}5%{变换：translateX(0)rotate(-5deg);}20%,25%{transform:translateX(1em)rotate(calc(90deg*1+5度));}30%{transform:translateX(1em)rotate(calc(90deg*1-5deg));}40%,45%{transform:translateX(2em)rotate(calc(90deg*2+5deg));}50%{transform:translateX(2em)rotate(calc(90deg*2-5deg));}60%,65%{transform:translateX(3em)rotate(calc(90deg*3+5deg));}70%{transform:translateX(3em)rotate(calc(90deg*3-5deg));}80%{变换：translateX(0)rotate(-5deg);}}让木条爬到接近箱子的顶部做投掷动作：.loader{animation:throw3sinfinite;transform-origin:20%;}@keyframesthrow{0%,70%,100%{transform:rotate(-45deg);}80%{变换：旋转（-135deg）；}}增加盒子爬到顶部时的掉落效果：@keyframespush{70%{transform:translateX(3em)translateY(0)rotate(calc(90deg*3-5deg))scale(1);过滤器：不透明度（1）；}80%{转换：translateX(0)translateY(-5em)rotate(-5deg)scale(0);滤镜：不透明度（0.5）；}90%{转换：translateX(0)translateY(0)rotate(0deg)scale(0);}}最后，隐藏可能超出页面的部分：body{overflow:hidden;}就大功告成了！
