巧用 CSS 实现动态线条 Loading 动画

2023-08-25 08:59| 来源: 网络整理| 查看: 265

有群友问我，使用 CSS 如何实现如下 Loading 效果：

这是一个非常有意思的问题。

我们知道，使用 CSS，我们可以非常轻松的实现这样一个动画效果：

div { width: 100px; height: 100px; border-radius: 50%; border: 2px solid transparent; border-top: 2px solid #000; border-left: 2px solid #000; animation: rotate 3s infinite linear; } @keyframes rotate { 100% { transform: rotate(360deg); } }

动画如下：

与要求的线条 loading 动画相比，上述动画缺少了比较核心的一点在于：

线条在旋转运动的过程中，长短是会发生变化的

所以，这里的的难点也就转变为了，如何动态的实现弧形线段的长短变化？解决了这个问题，也就基本上解决了上述的线条变换 Loading 动画。

【本文地址】

公司简介

联系我们