前端日常实践：10#视频演示如何用纯CSS制作同心圆弧旋转loader特效
时间：2023-04-02 18:59:08
HTML
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接即可全屏预览。https://codepen.io/zhang-ou/pen/OZmXQX交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cPdWVuD源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/010-concentric-arc-rotating-loader-animation代码解释定义了dom，它只包含一个元素：
居中显示：html,body,.circle{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}一共画了三个圆弧，先画最外层的样式：.circle{width:10em;高度：10em；边框宽度：0.4em；边框样式：实心；边界半径：50%；左边框颜色：透明；border-right-color:transparent;边框顶部颜色：红色；border-bottom-color:blue;}然后使用伪元素绘制中间层的样式：.circle{position:relative;}.circle::before{content:'';位置：绝对；宽度：75%；高度：75%；边框宽度：0.4em；边框样式：实心；边界半径：50%；：透明的;边框顶部颜色：橙色；border-bottom-color:cyan;}然后使用伪元素绘制最内层样式：.circle::before{content:'';积极的上：绝对；宽度：75%；高度：75%；边框宽度：0.4em；边框样式：实心；边界半径：50%；左边框颜色：透明；右边框颜色：透明；边框顶部颜色：黄色；border-bottom-color:limegreen;}定义动画效果：@keyframesanimate{from{transform:rotate(0deg);}到{变换：旋转（1440度）；}}最后，将动画Effect应用到每一层：:after{animation:animate16sease-in-outinfinitealternate;}你完成了！知识点border-left-colorhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-left-colorborder-right-colorhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-right-colorborder-top-colorhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-top-colorborder-bottom-colorhttps://开发商。mozilla.org/zh-CN/docs/Web/CSS/border-bottom-coloranimation持续时间https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
