如何用纯css实现一个动态画圆环效果 – CSS – 前端 css button图片

代码示例如下所示：

html结构如下：

<div class=”wrap”>

<div class=”circle”></div>

<div class=”top”></div>

<div class=”bottom”></div>

</div>

实现的思路就是：

1. 首先定义外层容器大小，本例采用200×200，

.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%;

}