circle.gif
原理
HTML
<div class="percent-circle">
<!--外圈-->
<div id="circle" class="circle-border">
<!--內(nèi)圈-->
<div class="circle" id="circle-text"></div>
</div>
</div>
圓環(huán)構(gòu)成
整個(gè)環(huán)有一大一小兩個(gè)圓組成锭部，內(nèi)層較小的作為遮蓋層，利用顏色不同遮住較大的圓面褐，從而構(gòu)成一個(gè)環(huán)拌禾。
background-image屬性和linear-gradient()來(lái)控制顏色。
第一個(gè)linear-gradient()函數(shù)生成的背景圖像上面灰色展哭，下面透明湃窍，旋轉(zhuǎn)90deg后，右邊灰色匪傍，左邊透明顯示本色您市；
第二個(gè)linear-gradient()的作用相反，所以此時(shí)整個(gè)環(huán)顯示的是灰色役衡。
//less
.percent-circle {
.circle {
position: relative;
top: 5px;
left: 5px;
color: black;
text-align: center;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 100%;
background-color: azure;
}
.circle-border {
position: relative;
text-align: center;
width: 110px;
height: 110px;
margin-left: 30%;
border-radius: 100%;
background-color: green;
background-image: linear-gradient(90deg, transparent 50%,rgb(197, 207, 207) 50%),
linear-gradient(90deg, rgb(192, 206, 206) 50%, transparent 50%);
}
}
改變百分比狀態(tài)
js將第一個(gè)linear-gradient()創(chuàng)造的背景旋轉(zhuǎn)茵休，灰色部分逐漸左移與第二個(gè)重合，其透明部分逐漸將圓的本色顯示出來(lái)手蝎。
當(dāng)其透明部分完全轉(zhuǎn)出來(lái)的時(shí)候榕莺，將它復(fù)位為初始狀態(tài)，同時(shí)將灰色部分替換為圓的本色棵介，再次旋轉(zhuǎn)就會(huì)逐漸覆蓋掉第二個(gè)的灰色钉鸯。
從始至終只有第一個(gè)linear-gradient()的背景圖像在變化，第二個(gè)只是作為遮蓋邮辽。
let i = 0, id, c = document.getElementById('circle'), ct = document.getElementById('circle-text')
let fun = function () {
if (i > 360) {
cancelAnimationFrame(id)
return
}
if (i < 180)
c.style.backgroundImage = 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, rgb(192, 206, 206) 50%),linear-gradient(90deg, rgb(192, 206, 206) 50%, transparent 50%)'
else
c.style.backgroundImage = 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, green 50%),linear-gradient(90deg, rgb(192, 206, 206) 50%, transparent 50%)'
i++
ct.textContent = parseInt(i/3.6) + '%'
id = window.requestAnimationFrame(fun)
}
fun()
