如何为边框设置动画？

Question

我想创建一个圆形边框，如该对象的第二个状态所示。所以加载图标。我将如何用 JavaScript 做到这一点？

我不是在找人写出完整的代码，而是想知道选择器等的研究方向。

Answer 1

很简单。基本上你从一个具有一定宽度和高度的圆开始，一个完整的 border-radius 和一个过渡到它。然后在悬停时，例如，增加该圆圈的宽度。这样做会很快将该圆圈变成一个矩形。如果你做不到，我会为你创建一些示例。

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

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>

从这里开始您可以修改它以满足您的需要。