<!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>
时间： 2024-12-21 00:45:47