• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

SVG实现多彩圆环倒计时效果

CSS3 web前端中文站 2年前 (2017-11-11) 1000次浏览 已收录 0个评论

圆环倒计时我们经常见到,实现的方法也有很多种。但是本文将介绍一种全新的实现方式,使用SVG来实现倒计时功能。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

本文主要用到了SVGstroke-dasharraystroke-dashoffset特性。下图是倒计时运行效果:

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();

整个案例的代码非常少,有喜欢的朋友可以将代码保存到 html 中,运行一下,体验体验实际效果。

类似的 svg 应用 demo 实例如《CSS3+SVG 实现带秒针的复古圆盘表盘时钟》和《SVG 图表插件 CHARTS 教程》,大家可以进一步通过实例学习 svg 知识。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:SVG 实现多彩圆环倒计时效果
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址