javascript - 如何制作边框动画？

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>

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