前端日常实战：27#视频演示如何用纯CSS制作出美妙的彩虹加载效果
时间：2023-03-31 00:33:43
CSS
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览在全屏。https://codepen.io/comehop??e/pen/vjvoow交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cPLGLhV源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom:
中心显示：html,body,.bows{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background:black;}定义彩虹的大小：.rainbow{width:20em;height:10em;}定义彩虹内部拱门的大小：.bows{width:100%;高度：200%；position:relative;}定义彩虹内部所有拱门共有的属性：.bows{transform:rotate(225deg);}.bowsspan{position:absolute;宽度：calc(100%-2em*(var(--n)-1));高度：计算(100%-2em*(var(--n)-1));border:1emsolidvar(--color);框大小：边框框；边框顶部颜色：透明；-左颜色：透明；border-radius:50%;}分别为每个弓设置个性变量：.bowsspan:nth-child(1){--n:1;--颜色：橙红色；}。弓跨度：nth-??child(2){--n:2;--color:orange;}.bowsspan:nth-child(3){--n:3;--color:yellow;}.bowsspan:nth-child(4){--n:4;--color:mediumspringgreen;}.bowsspan:nth-child(5){--n:5;--color:deepskyblue;}.bowsspan:nth-child(6){--n:6;--color:mediopurple;}定义动画效果:.bowsspan{animation:rotating3sinfinite;动画延迟：calc(0.05s*var(--n));}@keyframes旋转{0%,20%{变换:旋转(0deg);}80%,100%{变换:旋转(360deg);}}最后，隐藏容器外的内容：.rainbow{overflow:hidden;}大功告成！
