首页 > 代码库 > css 倒计时 svg
css 倒计时 svg
<!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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。