Question

我有一个宽度和高度相同的div，半径为50％，我需要这个div的边框，如链接所示。

`https://codepen.io/anon/pen/MbWagQ`

我需要一个圆形div的相同动画。

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>

圆圈周围的动画边框

1 个答案: