环绕圆圈的动画边框

Question

我有一个宽度和高度相同的 div，边框半径为 50%，我需要在鼠标悬停时在 div 周围绘制一个边框，并带有动画。当有人将鼠标悬停在 div 上时，动画边框从右上开始，然后移动到下 > 左 > 上，然后以线性效果返回到右。 如果有人在没有jQuery的情况下做到这一点会更好

Answer 1

    .draw {
      -webkit-transition: color 0.25s;
      transition: color 0.25s;
      border-radius: 50%;
    }
    .draw::before, .draw::after {
      border-radius: 50%;
      border: 3px solid transparent;
      width: 0;
      height: 0;
    }
div {
      background: none;
      border: 0;
      box-sizing: border-box;
      color: #f45e61;
      font-size: inherit;
      font-weight: 700;
      padding: 1em 2em;
      text-align: center;
      margin: 20px;
      position: relative;
      vertical-align: middle;
      width:100px;
    }
    div::before, div::after {
      box-sizing: border-box;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
    }

和html

 <div class="draw">draw</div>