前端日常实践：53#视频演示如何用纯CSS制作文字淡入淡出的loader动画
时间：2023-04-05 23:57:37
HTML5
效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击全屏预览链接。https://codepen.io/comehop??e/pen/ERwpeG互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cED8KsK源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含7个子元素，每个子元素有一个字母：loading
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}设置容器尺寸：.loader{width:40em;height:3em;}设置文字样式:.loader{color:dodgerblue;字体大小：1.5em；文本转换：大写；font-family:sans-serif;}添加淡入淡出动画到文本：.loaderspan{animation:moving2slinearinfinite;}@keyframesmoving{0%{filter:opacity(0);}33%{过滤器：不透明度（1）；}66%{过滤器：不透明度（1）；}100%{过滤器：不透明度（0）;}}设置动画延迟，增强动画效果：.loaderspan{animation-delay:calc((var(--n)-10)*0.2s)}.loaderspan:nth-child(1){--n:1;}.loaderspan:nth-child(2){--n:2;}.??loaderspan:nth-child(3){--n:3;}.loaderspan:nth-child(4){--n:4;}.loaderspan:nth-child(5){--n:5;}.loaderspan:nth-child(6){--n:6;}.loaderspan:nth-child(7){--n:7;}设置文字旋转效果:.loader{position:relative;}.loaderspan{position:absolute;高度：3em；}@keyframes移动{0%{过滤器：不透明度（0）；变换：旋转（-180度）；}33%{过滤器：不透明度（1）；变换：旋转（0度）；}66%{过滤器：不透明度（1）；变换：旋转（0度）；}100%{过滤器：不透明度（0）；变换：旋转（180度）；}}增加文字移动效果：@keyframesmoving{0%{filter:opacity(0);变换：旋转（-180度）；左：100%；}33%{过滤器：不透明度（1）；变换：旋转（0度);左：60%；}66%{过滤器：不透明度（1）；变换：旋转（0度）；左：40%；}100%{过滤器：不透明度（0）；0;}}添加文字变色效果：.loader{animation:change-color10slinearinfinite;}@keyframeschange-color{0%{color:dodgerblue;}20%{颜色：艳粉色；}40%{颜色：金色；}60%{颜色：中紫色；}80%{颜色：浅绿色；}100%{颜色：道奇蓝；}}最后，将可能出现在页面外的部分隐藏起来：body{overflow:hidden;}就大功告成了！
