前端日常实践：17#视频演示如何用纯CSS制作炫酷的同心矩形旋转动画
时间：2023-04-05 19:34:12
HTML5
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/bMvbRp交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cp2dZcQ源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/017-swapping-colors-loader-animation代码解释定义dom，一个容器包含一个span：
中心显示：html,body,.loader{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}设置span的样式：.loader{width:10em;高度：10em；字体大小：28px；位置：相对；}.loaderspan{位置：绝对；宽度：100%；高度：100%；背景色：rgba(100%,0%,0%,0.3)；框大小：边框框；边框：0.5em实心；border-color:whitergba(100%,100%,100%,0.2);}在dom中将跨度增加到5：
分别设置5个span的大小：.loaderspan:nth-child(1){width:calc(20%+20%*(5-1));身高：计算（20%+20%*(5-1));}.loaderspan:nth-child(2){宽度:calc(20%+20%*(5-2));height:calc(20%+20%*(5-2));}.loaderspan:nth-child(3){width:calc(20%+20%*(5-3));高度：计算（20%+20%*(5-3)）;}.loaderspan:nth-child(4){宽度：计算（20%+20%*(5-4)）;高度：计算（20%+20%*(5-4)）;}.loaderspan:nth-child(5){宽度：计算（20%+20%*(5-5)）;height:calc(20%+20%*(5-5));}增加颜色变化的动画效果：.loaderspan{animation:animate5sease-in-outinfinitealternate;}@keyframesanimate{0%{/*红色*/背景色：rgba(100%,0%,0%,0.3);}25%{/*黄色*/背景颜色：rgba(100%,100%,0%,0.3);}50%{/*绿色*/背景色：rgba(0%,100%,0%,0.3);}75%{/*blue*/background-color:rgba(0%,0%,100%,0.3);}100%{/*紫色*/背景颜色：rgba(100%,0%,100%,0.3);}}再增加旋转效果：@keyframesanimate{0%{transform:rotate(0deg);}100%{变换：旋转（720度）；}}最后，为每个span设置动画延迟以增加动态：.loaderspan:nth-child(1){animation-delay:calc(0.2s*(5-1));}.loaderspan:nth-child(2){animation-delay:calc(0.2s*(5-2));}.loaderspan:nth-child(3){animation-delay:calc(0.2s*(5-3));}.loaderspan:nth-child(4){animation-delay:calc(0.2s*(5-4));}.loaderspan:nth-child(5){animation-delay:calc(0.2s*(5-5));}知识点border-colorhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-colorcalc()https://developer.mozilla.org/en-US/docs/Web/CSS/calcrotate()https://developer.mozilla.org/en-US/文档/Web/CSS/transform-function/rotateanimation-delayhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
