前端日常实践：82#视频演示如何使用纯CSS制作跳动字母i
时间：2023-03-31 13:15:53
CSS
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接进行预览全屏。https://codepen.io/comehop??e/pen/pZbrpJ互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cq9pZhN源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有一个元素：
centerdisplay:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.loader{width:8em;高度：10em；font-size:10px;}绘制字母i的形状：.loader{display:flex;弹性方向：列；对齐项目：居中；}.loader::before{content:'';宽度：5em；高度：5em；背景色：橙红色；border-radius:50%;}.loader::after{content:'';宽度：5em；高度：8em；背景颜色：橙色；border-radius:0.5em;}增加下矩形的旋转效果:.loader::after{animation:rect-rotating1sease-in-outinfinite;}@keyframesrect-rotating{50%{transform:rotate(90度）；}100%{变换：旋转（180度）；}}增加上层球的跳跃效果：.loader::before{animation:ball-jumping1sease-in-outinfinite;}@keyframesball-jumping{20%,80%{transform:translateY(-2em);}50%{转换：translateY(calc((8em-5em)/2));}}大功告成！
