css 倒计时 svg

浏览数：20 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
 <head>  
  <meta charset="utf-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title> new document </title>
  <style>
     div{position:absolute;width:200px;height:200px;left:0;top:0;right:0;bottom:0;margin:auto;border-radius:50%;background-color:#CCC;}
     div:before,
     div:after{position:absolute;content:"";width:50%;height:100%;top:0;left:0;background-color:#CCC;border-radius:100% 0 0 100%/50% 0 0 50%;z-index:1;transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;}
     div.half,
     div:before{background-color:gold;}
     div{animation:run 10s steps(1,end);-webkit-animation:run 10s steps(1,end);-moz-animation:run 10s steps(1,end);-o-animation:run 10s steps(1,end);}
     div:before{animation:run1 10s linear;-webkit-animation:run1 10s linear;-moz-animation:run1 10s linear;-o-animation:run1 10s linear;}
     div span{position:absolute;width:100%;height:22px;left:0;top:90px;font-size:20px;font-weight:bold;line-height:22px;text-align:center;z-index:5;}
     @keyframes run{
        50%,
        100%{background-color:gold;}
     }
     @keyframes run1{
        100%{z-index:3;transform:rotate(360deg);}
     }

     @-webkit-keyframes run{
        50%,
        100%{background-color:gold;}
     }
     @-webkit-keyframes run1{
        100%{z-index:2;-webkit-transform:rotate(360deg);}
     }

　　svg倒计时

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>svg做的倒计时</title>
<body>
<div id="svgBox">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
 	<path id="test1" style="fill:#fe0; stroke:#fff; stroke-width:0;"/>
	<text x="93" y="100" fill="green" id="text">1</text>
</svg>
<script>
window.onload=function(){
	num = 360 ;
	var time = setInterval(j,10);
	function j(){		
		 num = num - 1;
		 i = parseInt(num/360*100);
		 var text_ = document.getElementById("text");		 
		 text_.textContent = i;			//svg节点是xml，所以只能用textContent代替innerHTML来获取文本节点
		 var startAngle=90;
		 var cx = 100;					//svg与y轴的距离
		 var cy = 100;					//svg与x轴的距离
		 var r = 100;					//圆的半径
		 var deg1 = num + startAngle;
		 

		 var x0 = cx+r*Math.cos(startAngle*Math.PI/180);
		 var y0 = cy-r*Math.sin(startAngle*Math.PI/180);
		
		 var x1 = cx+r*Math.cos(deg1*Math.PI/180); 
		 var y1 = cy-r*Math.sin(deg1*Math.PI/180); 
		 var a = num<180 ? 0 : 1;
		 var test = document.getElementById("test1");

		 //画笔落在(cx,cy)，画线至(x0,y0)，画圆弧(从当前点到x1,y1画椭圆,r,r为长短半轴,偏转0度,大圆弧或小圆弧,逆时针或顺时针,闭合路径)
		 test.setAttribute("d","M "+cx+","+cy+" L "+x0+","+y0+" A "+r+","+r+" 0 "+a+",0 "+x1+","+y1+" Z");
		 if(num<1){
			 text_.setAttribute("fill","red");
			 window.clearInterval(time);
			 console.log("时间到了昂~~~");
		 }
	};

};
</script>
</div>
</body>
</html>

css 倒计时 svg,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css 倒计时 svg