如今的一些數據運營活動h5頁面中,一般回涉及到圓形的進度條,好比京東白條,螞蟻芝麻分。最近作了一個相似的,固然前期想法是用canvas作,可是考慮到低端安卓手機的渲染能力,最終以純原生css+js實現,總結一下css
index0底層一個色值#c1a76b的圓,中間index1一個三角形,也就是底邊缺的效果,上層index2是白色全圓(帶陰影,600和信用極好包裹在裏面),另外左右50%各鋪一個index3,index4透明層,這個層overflow:hidden,兩個層裏面都有一個#f7f7f7的填充,經過旋轉這兩個填充物來實現圓形進度效果(先左邊旋轉180deg完,再旋轉右邊)html
<!DOCTYPE html> <html> <head> <style> body { background-color: #f7f7f7; } .new-cricle { position: relative; width: 148px; height: 148px; border-radius: 50%; background-color: #c1a76b; margin: 0 auto; z-index: 0; } .new-cricle .cricle-text { position: absolute; top: 20px; width: 130px; left: 50%; margin-left: -65px; z-index: 5; text-align: center; } .new-cricle .cricle-text.p0 { top: 28px; font-size: 42px; color: #C09B5B; font-family: DINAlternate-Bold; } .new-cricle .cricle-text.txt2 { top: 85px; font-size: 16px; color: #C09B5B; font-family: PingFangSC-Medium; } .cricle-left-area { position: absolute; top: -1px; left: -1px; width: 75px; height: 150px; background-color: transparent; overflow: hidden; } .cricle-left { position: absolute; width: 75px; height: 150px; background-color: #f7f7f7; border-radius: 75px 0 0 75px; transform-origin: right center; z-index: 1; transition: 1.5s all; transform: rotate(35deg); } .cricle-right-area { position: absolute; top: -1px; right: -1px; width: 75px; height: 150px; background-color: transparent; overflow: hidden; } .cricle-right { position: absolute; width: 75px; height: 150px; background-color: #f7f7f7; border-radius: 0 75px 75px 0; transform-origin: left center; z-index: 2; transition: 1.5s all; } .triangle { width: 0; height: 0; border-width: 0 80px 80px; border-style: solid; border-color: transparent transparent #f7f7f7;/*透明 透明 白*/ position: absolute; bottom: -10px; left: 50%; margin-left: -80px; z-index: 3; } .cricle-all { position: relative; width: 128px; height: 128px; border-radius: 50%; background-color: #fff; box-shadow: 0 2px 15px 0 #D8CEBB; margin: 0 auto; z-index: 4; top: 10px; } </style> </head> <body> <div class="new-cricle"> <div class="cricle-left-area"> <div class="cricle-left" id="cricleLeft"></div> </div> <div class="cricle-right-area"> <div class="cricle-right" id="cricleRight"></div> </div> <div class="triangle"></div> <div class="cricle-all"></div> <div class="cricle-text p0">600</div> <div class="cricle-text txt2">信用極好</div> </div> </body> <script> var $cricleLeft = document.getElementById('cricleLeft') var $cricleRight = document.getElementById('cricleRight') var angle = 360; //旋鈕角度 setTimeout(function(){ if(angle >= 180){ $cricleLeft.style.transform = 'rotate(180deg)'; setTimeout(function(){ $cricleRight.style.transform = 'rotate('+ (angle - 180) +'deg)'; }, 1400) }else{ $cricleLeft.style.transform = 'rotate(' + angle + 'deg)'; } }, 1000) </script> </html>
點擊進入canvas