다채로운 링 카운트다운 효과를 구현하는 SVG 샘플 코드

벨소리 카운트다운을 자주 볼 수 있으며 이를 구현하는 방법은 다양합니다. 하지만 이 기사에서는 SVG를 사용하여 카운트다운 기능을 구현하는 새로운 구현 방법을 소개합니다.

이 문서에서는 주로 SVG의 스트로크-대시 배열 및 스트로크-대시 오프셋 기능을 사용합니다. 아래 그림은 카운트다운 실행 효과를 보여줍니다.

SVG 카운트다운 사례

관련 구현 코드에 대해 이야기해 보겠습니다. CSS 구현 코드는 다음과 같습니다.

 svg { 변환: 회전(-0.05deg);}원 { 전환: 스트로크-dasharray .2s;}.time-count-x { 선 높이: 1.5; 위치: 상대;}.time-초 { 위치: 절대; 위쪽: 50%; 오른쪽: 0; 여백: -.75em; 글꼴 크기: 100px

관련 HTML 코드는 다음과 같습니다.

 <div id=timeCountX 클래스=시간-카운트-x> <svg width=440 height=440 viewBox=0 0 440 440 class=center> <defs> <linearGradient x1=1 y1=0 x2=0 y2=0 id= 그래디언트1> <스톱 오프셋=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 채우기=없음 스트로크-dasharray=1069 1069></circle> <원 cx=220 cy=220 r=170 획-너비=50 스트로크=url('#gradient1') 채우기=없음 스트로크-dasharray=1069 1069></circle> <circle cx=220 cy=220 r=170 스트로크 너비=50 스트로크=url('#gradient2') 채우기= 없음 스트로크-dasharray=534.5 1069></circle> </g> </svg> <span id=timeSecond 클래스=시간-초></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(Stroke-dasharray,perimeter/2+ 1069) } eleTimeSec.innerHTML=};var 타이머TimeCount=null;var fnTimeCount=function(b){ if(timerTimeCount) { 반환 } var b=b||10; var a=function(){ var c=b/10; if(eleCircles[1]){ eleCircles[1].setAttribute(스트로크-dasharray,주변*c+ 1069) } if(eleCircles[2]&&b<=5){ eleCircles[2].setAttribute(스트로크-dasharray,주변* c+ 1069) } if(eleTimeSec){ eleTimeSec.innerHTML=b } b--; if(b<0){clearInterval(timerTimeCount);timerTimeCount=null; CircleInit() } a(); ) ;

전체 케이스에는 코드가 거의 없습니다. 마음에 드는 친구는 코드를 html로 저장하고 실행하여 실제 효과를 경험할 수 있습니다.

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.