使用SVG怎么实现一个多彩圆环倒计时效果

今天就跟大家聊聊有关使用SVG怎么实现一个多彩圆环倒计时效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

css实现代码如下：

svg {     transform: rotate(-0.05deg); } circle {     transition: stroke-dasharray .2s; } .time-count-x {     line-height: 1.5;     position: relative; } .time-second {     position: absolute;     top: 50%; left: 0; right: 0;     margin-top: -.75em;     text-align: center;     font-size: 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">                 <stop offset="0%" stop-color="#e52c5c"></stop>                 <stop offset="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 transform="matrix(0,-1,1,0,0,440)">             <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#f0f1f5" fill="none" stroke-dasharray="1069 1069"></circle>             <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient1')" fill="none" stroke-dasharray="1069 1069"></circle>             <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient2')" fill="none" stroke-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("stroke-dasharray","1069 1069")     }     if(eleCircles[2]){         eleCircles[2].setAttribute("stroke-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("stroke-dasharray",perimeter*c+" 1069")         }         if(eleCircles[2]&&b<=5){             eleCircles[2].setAttribute("stroke-dasharray",perimeter*c+" 1069")         }         if(eleTimeSec){             eleTimeSec.innerHTML=b         }         b--;         if(b<0){             clearInterval(timerTimeCount);             timerTimeCount=null;             alert("时间到！");             circleInit()         }     };     a();     timerTimeCount=setInterval(a,1000) }; fnTimeCount();

看完上述内容，你们对使用SVG怎么实现一个多彩圆环倒计时效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。