如何为边框设置动画？

Question

我要创建一个圆形边框，如在该对象的第二种状态所示。因此，正在加载图标。我将如何使用JavaScript做到这一点？

我不是在寻找写出完整代码的人，而是想要对选择器等进行研究的方向。

Answer 1

很容易。基本上，您从一个具有一定宽度和高度的圆，一个完整的边界半径及其过渡开始。然后，例如在悬停时，增加该圆圈的宽度。这样做会顺利地将圆圈变成矩形。如果您无法使其正常运行，我会为您创建一些示例。

看看这个（悬停在圆圈上）

div {
  width: 50px;
  height: 50px;
  border: 3px solid green;
  border-radius: 30px;
  margin:0 auto;
  transition: .5s;
}

div:hover{
  width: 200px;
  background-color: green;
}

<div></div>

从这里开始，您可以对其进行修改以适合您的需求。