リングのカウントダウンはよく見られますが、これを実装する方法はたくさんあります。しかし、この記事では、SVG を使用してカウントダウン機能を実装する新しい実装方法を紹介します。
この記事では主に SVG のストローク-ダシャレー機能とストローク-ダシャオフセット機能を使用します。下の図は、カウントダウンの実行エフェクトを示しています。
SVG カウントダウンのケース
関連する実装コードについて話しましょう。 CSSの実装コードは以下のとおりです。
svg { 変換: 回転 (-0.05 度);} サークル { 遷移: ストローク-ダシャーレイ .2s;}.time-count-x { 行の高さ: 1.5; 位置: 相対;}.time-秒 { 位置: 絶対;上: 50%; 左: 0; マージン-上: -.75em; フォントサイズ: 100px;関連する HTML コードは次のとおりです。
<div id=timeCountX class=time-count-x> <svg width=440 height=440 viewBox=0 0 440 440 class=center> <defs> <linearGradient x1=1 y1=0 x2=0 y2=0 id= gradient1> <ストップ オフセット=0% stop-color=#e52c5c></stop> <ストップ オフセット=100% stop-color=#ab5aea></stop> </linearGradient> <linearGradient x1=1 y1=0 x2=0 y2=0 id=gradient2> <stop offset=0% stop-color=#4352f3></stop> <stop offset=100% stop-color=#ab5aea></stop> </linearGradient> </defs> <g変換=行列(0,-1,1,0,0,440)> <circle cx=220 cy=220 r=170 ストローク-幅=50 ストローク=#f0f1f5 fill=none ストローク-dasharray=1069 1069></circle> <circle cx=220 cy=220 r=170 ストローク幅=50ストローク=url('#gradient1') fill=none ストローク-dasharray=1069 1069></circle> <circle cx=220 cy=220 r=170 ストローク-幅=50 ストローク=url('#gradient2') fill=なし ストローク-dasharray=534.5 1069></circle> </g> </svg> <span id=timeSecond class=time-second></span></div>最後に、関連する JavaScript コード:
var eleCircles=document.querySelectorAll(#timeCountX Circle);var eleTimeSec=document.getElementById(timeSecond);var perimeter=Math.PI*2*170;var CircleInit=function(){ if(eleCircles[1]){ eleCircles[ 1].setAttribute(ストローク-ダシャーレイ,1069 1069) } if(eleCircles[2]){ eleCircles[2].setAttribute(ストローク-dasharray,perimeter/2+ 1069) } eleTimeSec.innerHTML=};var timerTimeCount=null;var fnTimeCount=function(b){ if(timerTimeCount) { return } var b=b||10; var a=function(){ var c=b/10; if(eleCircles[1]){ eleCircles[1].setAttribute(ストローク-ダシャーレイ,周縁*c+ 1069) } if(eleCircles[2]&&b<=5){ eleCircles[2].setAttribute(ストローク-ダシャーレイ,周縁* c+ 1069) } if(eleTimeSec){ eleTimeSec.innerHTML=b } b--; if(b<0){ timerTimeCount=null; アラート(時間切れ!) } a(); ) ;ケース全体にはコードがほとんどありません。気に入った友人はコードを HTML に保存し、実行して実際の効果を体験できます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。