如题所述
htmlé¨åï¼
<pre class="brush:html;toolbar: true; auto-links: false;"><div class="div1"> <div class="right-div2"> <div class="right-div3"></div> </div> <div class="left-div2"> <div class="left-div3"></div> </div> </div> <div class="div4"><span>0</span>%</div></pre>
æå å±çdiv3è£åªä¸åç¶åæ转éè¦çè§åº¦ï¼ ç¶çº§div2è£åªä¸åï¼æ¤æ¶å·²ç»è£åªåºæ¥äºé£ä¸ªæå½¢äº æåå¨ä¸é¢å 个åå½¢é®çå±
css代ç ï¼
<pre class="brush:css;toolbar: true; auto-links: false;">.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; border-radius:50%;} .div1 { background:#ccc; position:relative;} .right-div2, .right-div3, .left-div2, .left-div3 { position:absolute; left:0; top:0;} .right-div2, .right-div3 { clip:rect(0,auto,auto,100px);} .left-div2, .left-div3 { clip:rect(0,100px,auto,auto);} .right-div3 { background:#f00; transform:rotate(-180deg);} .left-div3 { background:#f00; transform:rotate(-180deg);} .div4 { position:absolute; top:25px; left:25px; width:150px; height:150px; line-height:150px; text-align:center; border-radius:50%; background:#fff;}</pre>
js代ç ï¼
<pre class="brush:js;toolbar: true; auto-links: false;">$(function(){ var a = 0; var b = 0; var timer = setInterval(function(){ a++; if(a<=50){ //-180degæ¯0%ï¼è½¬æ¢ä¸ä¸ b = a*3.6-180; $('.right-div3').css('transform','rotate(' + b + 'deg)'); }else if(a>50&&a<=100){ //è¶ è¿50%ï¼éè¦ä¿®æ¹å·¦è¾¹ç,å³è¾¹0degæ¯50% $('.right-div3').css('transform','rotate(0)'); //左边0degæ¯100%ï¼è½¬æ¢ä¸ä¸ b = a*3.6-360; $('.left-div3').css('transform','rotate(' + b + 'deg)'); }else{ clearInterval(timer); return; } $('.div4 span').html(a); },200); });</pre>
<pre class="brush:html;toolbar: true; auto-links: false;"><div class="div1"> <div class="right-div2"> <div class="right-div3"></div> </div> <div class="left-div2"> <div class="left-div3"></div> </div> </div> <div class="div4"><span>0</span>%</div></pre>
æå å±çdiv3è£åªä¸åç¶åæ转éè¦çè§åº¦ï¼ ç¶çº§div2è£åªä¸åï¼æ¤æ¶å·²ç»è£åªåºæ¥äºé£ä¸ªæå½¢äº æåå¨ä¸é¢å 个åå½¢é®çå±
css代ç ï¼
<pre class="brush:css;toolbar: true; auto-links: false;">.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; border-radius:50%;} .div1 { background:#ccc; position:relative;} .right-div2, .right-div3, .left-div2, .left-div3 { position:absolute; left:0; top:0;} .right-div2, .right-div3 { clip:rect(0,auto,auto,100px);} .left-div2, .left-div3 { clip:rect(0,100px,auto,auto);} .right-div3 { background:#f00; transform:rotate(-180deg);} .left-div3 { background:#f00; transform:rotate(-180deg);} .div4 { position:absolute; top:25px; left:25px; width:150px; height:150px; line-height:150px; text-align:center; border-radius:50%; background:#fff;}</pre>
js代ç ï¼
<pre class="brush:js;toolbar: true; auto-links: false;">$(function(){ var a = 0; var b = 0; var timer = setInterval(function(){ a++; if(a<=50){ //-180degæ¯0%ï¼è½¬æ¢ä¸ä¸ b = a*3.6-180; $('.right-div3').css('transform','rotate(' + b + 'deg)'); }else if(a>50&&a<=100){ //è¶ è¿50%ï¼éè¦ä¿®æ¹å·¦è¾¹ç,å³è¾¹0degæ¯50% $('.right-div3').css('transform','rotate(0)'); //左边0degæ¯100%ï¼è½¬æ¢ä¸ä¸ b = a*3.6-360; $('.left-div3').css('transform','rotate(' + b + 'deg)'); }else{ clearInterval(timer); return; } $('.div4 span').html(a); },200); });</pre>
温馨提示:答案为网友推荐,仅供参考