任性 CSS 实现 Donut loading

HTML

只需要一个 div 即可

CSS

1. 规定 div 的宽高,并指定默认边框宽度

2. 通过 border-radius: 50% 将 div 设置为圆形

3. 单独修改左边框颜色 border-left-color: red;

4. 通过 @keyframes 创建动画方案

➪ from 和 to 表示开始和结束

➪通过 transform: rotate(0deg) 实现 div 旋转

5. 使用 animation 指定动画方案

➪ linear 源自 animation-timing-function ,表示线性的,匀速的变化

➪ infinite 源自 animation-iteration-count ,表示无限循环

颜色改为渐变色

➪ 改为使用 0%-100% 表现动画轨迹

➪ 使用最基础的 red/green/blue 三元素表示渐变

➪ 开头和结尾都设置为红色的目标是为了让渐变显示的顺滑一些

边框从 1/4 改为 1/8

➪ 为了确保始终是一个元素完成动画效果,所以此处使用 ::after 来穿件 div 的伪元素

➪ 将元素设置为绝对定位可以同时左边和顶部做位移,确保伪元素能覆盖父元素的部分内容

➪ 边框圆角只设置左上和右上确保伪元素只遮挡父元素一般的内容

END
查看更多文章请关注【实训在线】微信公众号
原文首发：www.shixun.online