效果预览在当前页面点击右侧“点击预览”按钮即可预览，点击链接可完整预览屏幕。https://codepen.io/comehop??e/pen/gjgyWm互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/czDMNsw源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含4个元素：/div>居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}在容器中心画一个正方形：.loader{width:10em;高度：10em；边框：0.25em纯白色；字体大小：10px；border-radius:1em;}在容器周围绘制正方形：.loader,.loaderspan{position:absolute;}.loaderspan:nth-child(1){top:5em;左：5em；}.loaderspan：nth-??child(2){top：-5em；左：5em；}.loaderspan：nth-??child(3){top：5em；左：-5em；}.loaderspan：nth-??child(4){上：-5em；左：-5em;}给块上色：.loader,.loaderspan{mix-blend-mode:screen;}.loader{background-color:gold;}.loaderspan:nth-child(1){背景颜色：dodgerblue;}.loaderspan:nth-child(2){背景颜色：hotpink;}.loaderspan:nth-child(3){background-color:mediopurple;}.loaderspan:nth-child(4){background-color:limegreen;}给容器整体添加旋转动画：.loader{动画：旋转2s线性无限；}@keyframes旋转{to{transform:rotate(1turn);}}为容器周围的块添加反向旋转动画：.loaderspan{animation:de-rotating4slinearinfinite;}@keyframesde-rotating{from,to{transform:rotate(0deg)scale(0.5);}50%{变换：旋转（-180度）比例（1.2）；}}最后，隐藏页面外可能出现的内容：body{overflow:hidden;}就大功告成了！
