CSS3 循環パーセンテージプログレスの実装原理 bar_html/css_WEB-ITnose

原文 http://ymblog.net/2015/06/20/CSS3 Circular Percentage Progress Bar の実装原理/

今朝起きてjqueryプラグインを見たときCSS3 の円形パーセンテージ プログレス バーに関する関連記事を読んだ後、手に負えなくなり、いじり始めました。 。 。

円形の実現に関しては、中心が同じで半径が異なる 2 つの div を使用することで実現できます。大きな円の色は円形の進行状況バーの背景色、小さな円の色は中央のパーセンテージのマスクの色である白に、左右の半円を加えたものです。つまり、合計は次のとおりです。 4 つの div、1 つの大きな円 div には 3 つの div が含まれており、左側と右側に半円があり、マスク div が上部にあります。

ここで片側の半円を実現するにはどうすればよいですか? CSSのclip属性を使うと画像を切り取って半分だけ表示することができますが、これについては後ほど詳しく紹介します。

このような実装効果は実際に可能です (パーセンテージが 50% を超えていない場合)。たとえば、進捗バーでは 40% と表示されます。左右に回転する div はカバーされないため、それぞれの範囲を超える場合は非表示にし、そうでない場合は超えた部分も表示されます。写真のように、40% の場合は正常ですが、60% の場合も同じです

では、それをカバーするにはさらに 2 つの div が必要ですか? HTML コードを見てみましょう。

<div class="circle"><div class="pie_left"><div class="left"></div></div><div class="pie_right"><div class="right"></div></div><div class="mask"><span>10</span>%</div></div>

スタイル:

.circle {width: 200px;height: 200px;position: absolute;border-radius: 50%;background: #0cc;}.left,.right{width:200px;height:200px;position: absolute;top: 0px;left: 0px;}.pie_left, .pie_right{width:200px;height:200px;position: absolute;border-radius: 50%;top: 0px;left: 0px;background: red;}.pie_right,.right {clip:rect(0,auto,auto,100px);}.pie_left , .left{clip:rect(0,100px,auto,0);}/**当top和left取值为auto时，相当于0*当bottom和right取值为auto时，相当于100%*/.mask {width: 150px;height: 150px;border-radius: 50%;left: 25px;top: 25px;/*background: #FFF;*/position: absolute;text-align: center;line-height: 150px;font-size: 16px;}

ここでの JS コードは比較的単純なので、少し判断するだけで済みます:

$(function(){if( $('.mask span').text() <= 50 ){$('.pie_right').css('transform','rotate('+($('.mask span').text()*3.6)+'deg)');}else{$('.pie_right').css('transform','rotate(180deg)');$('.pie_left').css('transform','rotate('+(($('.mask span').text()-50)*3.6)+'deg)');}})

説明: 100% は 360 度に対応するため、50% は 180 度に対応し、1/ 3.6 支出。

Clip 属性を紹介しましょう

最もよく使われるクリップは、この記事を参照してください。クリップの互換性も高く、基本的なブラウザと互換性があります。

クリップの使用方法

この設定は、属性がposition:absolute;またはposition:fixed;に設定されている要素に対してのみ有効です。

clip:rect(top,right,bottom,left);

IE6`7 では、属性間のカンマを削除するだけです。

ここでの右と下の値は、左と上を基準にしています。選択した領域に含まれるピクセルが表示され、その他は非表示になります。

下が上より小さく、右が左より小さい場合はどうなりますか?すると、写真全体が非表示になります。

また、

左と上が自動に設定されている場合、その値は 0px、

右と下が下に設定されている場合、デフォルト値は 100% です。右と下の値を組み合わせた値は左と上に対する相対値であることを注意深く理解する必要があります。これは理解しやすいはずです。