前端日常实践：2#视频演示如何用纯CSS制作矩形旋转加载器效果
时间：2023-04-02 19:47:57
HTML
效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击链接进行预览全屏。https://codepen.io/zhang-ou/pen/vjLQMM互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cJMkwH9源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/002-rectangular-rotating-loader-animation代码解释定义了dom，一个包含3个span的容器：
居中显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明-内容：中心；background-color:black;}设置容器的大小：.loader{width:150px;高度：150px；position:relative;}设置矩形的边框样式：.loaderspan{position:absolute;框大小：边框框；border:10pxsoliddimgray;border-radius:2px;}设置3个矩形的尺寸：.loaderspan:nth-child(1){width:100%;高度：100%；}.loader跨度：nth-??child(2){宽度：70%；高度：70%；保证金：15%；}.loader跨度：nth-??child(3){宽度：40%；高度：40%；保证金：30%；}使用伪元素绘制左上角和右下角的装饰条：.loaderspan::before,.loaderspan::after{content:'';位置：绝对；宽度：10px；高度：50%；后退ground-color:gold;}.loaderspan::before{top:-10px;左：-10px；}.loaderspan::after{底部：-10px；right:-10px;}定义动画效果：@keyframesrotating{from{transform:rotateY(0deg);}到{变换：旋转Y(360deg);}}将动画应用于3个矩形：.loaderspan{animation:rotatinglinearinfinite;}.loaderspan:nth-child(1){animation-duration:4s;}.loaderspan:nth-child(2){animation-duration:2s;}.loaderspan:nth-child(3){animation-duration:1s;}最后，设置3个矩形的堆叠顺序：.loaderspan:nth-child(1){z-index:3;}.loaderspan:nth-child(2){z-index:2;}.??loaderspan:nth-child(3){z-index:1;}大功告成！知识点@keyframeshttps://developer.mozilla.org/en-US/docs/Web/CSS/@keyframesanimation-durationhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-durationrotateYhttps://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateYnth-childhttps://developer.mozilla.org/en-US/docs/Web/CSS/:nth-childz-indexhttps://developer.mozilla.org/en-US/docs/Web/CSS/z-index::beforehttps://developer.mozilla.org/en-US/docs/Web/CSS/::before::afterhttps://developer.mozilla.org/en-US/docs/Web/CSS/::after
