CSS3提供了很多新的特性，其中之一就是能夠利用 CSS3 的強大功能來創建環形百分比。相比于使用圖片來表示百分比，使用純 CSS3 的方式不僅更加靈活，而且更加高效。

實現環形百分比的方法很簡單，我們只需要借助CSS3的屬性來設置圓環的大小、顏色、邊框等，并使用CSS3的旋轉屬性來實現百分比的展示。

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f5f5f5;
position: relative;
}
.circle::before {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
border: 10px solid #3498db;
border-top-color: #f5f5f5;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: rota 1s linear infinite;
animation: rota 1s linear infinite;
}
@-webkit-keyframes rota {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rota {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

在以上示例代碼中，我們使用了偽元素“::before”來實現圓環的展示，通過旋轉動畫來實現百分比的展示效果。

在實際使用中，我們可以根據需要對樣式進行修改，比如修改顏色、寬度、百分比等等。使用 CSS3 實現環形百分比可以節省下載圖片的時間，同時也能使代碼更加簡潔易懂。