jQuery+CSS3倒计时代码,带圆环进度条效果

发布时间：2018-08-13 14:33 所属栏目：121 来源：站长网

导读：jQuery +CSS3倒计时代码，带圆环进度条效果。烈火网提示大家，此代码使用了CSS3技术，如果您使用 IE8 及以下版本的浏览器，无法运行本效果，请改用火狐或 Chrome 浏览器，看到效果后，你会发觉这个倒计时超不错。编写时主要用到了CSS3的用到了旋转与遮罩的

　　jQuery+CSS3倒计时代码，带圆环进度条效果。烈火网提示大家，此代码使用了CSS3技术，如果您使用IE8及以下版本的浏览器，无法运行本效果，请改用火狐或Chrome浏览器，看到效果后，你会发觉这个倒计时超不错。编写时主要用到了CSS3的用到了旋转与遮罩的基本技巧。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>CSS3圆环倒计时效果 by liumiao.me</title> <style> .pie { width:200px; height:200px; background-color:blue; border-radius:100px; position:absolute; } .pie1 { clip:rect(0px,200px,200px,100px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); background:-moz-radial-gradient(20% 50% 0deg, #333, #0000ff); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)); } .pie2 { clip:rect(0px,100px,200px,0px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); background:-moz-radial-gradient(80% 50% 0deg, #333, #0000ff); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)); } .hold { width:200px; height:200px; position:absolute; z-index:1; } .hold1 { clip:rect(0px,200px,200px,100px); } .hold2 { clip:rect(0px,100px,200px,0px); } .bg { width:200px; height:200px; background-color:red; border-radius:100px; position:absolute; box-shadow:0px 0px 8px #333; background:-moz-radial-gradient(0% 50% 0deg, #900, #ff0000); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#900), to(#ff0000)); } .time { width:160px; height:160px; margin:20px 0 0 20px; background-color:#fff; border-radius:100px; position:absolute; z-index:1; box-shadow:0px 0px 8px #333 inset; text-align:center; line-height:160px; font-family:"Book Antiqua", Palatino, serif; font-size:35px; font-weight:bold; text-shadow: 1px 1px 3px #333; } .time em { background:#fff; position:absolute; top:62px; left:12px; height:18px; width:140px; opacity:0.4; } </style> </head> <body> <div class="hold hold1"> <div class="pie pie1"></div> </div> <div class="hold hold2"> <div class="pie pie2"></div> </div> <div class="bg"> </div> <div class="time"><span></span><em></em></div> <script src="http://www.veryhuo.com/uploads/common/js/jquery-1.7.min.js"></script> <script> i = 0; j = 0; count = 0; MM = 4; SS = 59; MS = 9; totle = (MM+1)*600; d = 180*(MM+1); MM = "0" + MM; function showTime(){ totle = totle - 1; if(totle==0){ clearInterval(s); clearInterval(t1); clearInterval(t2); $(".pie2").css("-o-transform","rotate(" + d + "deg)"); $(".pie2").css("-moz-transform","rotate(" + d + "deg)"); $(".pie2").css("-webkit-transform","rotate(" + d + "deg)"); }else{ if(totle>0 && MS>0){ MS = MS - 1; if(MS < 10){MS = "0" + MS}; }; if(MS==0 && SS>0){ MS = 10; SS = SS - 1; if(SS < 10){SS = "0" + SS}; }; if(SS==0 && MM>0){ SS = 60; MM = MM - 1; if(MM < 10){MM = "0" + MM}; }; }; $(".time span").html(MM + ":" + SS + ":" + MS); }; s = setInterval("showTime()",100); function start1(){ i = i + 0.6; count = count + 1; if(count==300){ count = 0; clearInterval(t1); t2 = setInterval("start2()",100); }; $(".pie1").css("-o-transform","rotate(" + i + "deg)"); $(".pie1").css("-moz-transform","rotate(" + i + "deg)"); $(".pie1").css("-webkit-transform","rotate(" + i + "deg)"); }; function start2(){ j = j + 0.6; count = count + 1; if(count==300){ count = 0; clearInterval(t2); t1 = setInterval("start1()",100); }; $(".pie2").css("-o-transform","rotate(" + j + "deg)"); $(".pie2").css("-moz-transform","rotate(" + j + "deg)"); $(".pie2").css("-webkit-transform","rotate(" + j + "deg)"); }; t1 = setInterval("start1()",100); </script>  <input onclick="window.open('view-source:' + window.location.href)" type="button" value="查看源代码" style="position:absolute; right:0; top:0; width:80px; height:30px;"> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：ASP站长网）