如何用純css實現一個動態畫圓環效果？

代碼示例如下所示：

html結構如下：

<div class="wrap">

<div class="circle"></div>

<div class="top"></div>

<div class="bottom"></div>

</div>

實現的思路就是：

1. 首先定義外層容器大小，本例采用200x200，

.wrap{

position: relative;

width: 200px;

height: 200px;

overflow: hidden;

}

2. 通過border-radius畫一個圓環，這個比較簡單

.circle{

height: 100%;

box-sizing: border-box;

border: 20px solid red;

border-radius: 50%;

}