動畫邊界圓

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>