jQuery+CSS3动画倒计时特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3动画倒计时特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery+CSS3动画倒计时特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body>
<div class="container-fluid">
	<div class="col-xs-12 fill">
		<span id="runner"></span><br><br>
		<div class="col-sm-10 col-sm-offset-2">
			<div class="col-xs-4 col-sm-3 centered"><button id="stopBtn"></button></div>
			<div class="col-xs-4 col-sm-3 centered"><button id="startBtn"></button></div>
			<div class="col-xs-4 col-sm-3 centered"><button id="resetBtn"></button></div>
		</div>
	</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.runner-min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

JS代码(app.js):

$('#runner').runner({
	milliseconds:false,format:function millisecondsToString(milliseconds){
	var oneHour = 3600000;
	var oneMinute = 60000;
	var oneSecond = 1000;
	var seconds = 0;
	var minutes = 0;
	var hours = 0;
	var result;
	if (milliseconds >= oneHour){
	hours = Math.floor(milliseconds / oneHour);
}
milliseconds = hours > 0 ? (milliseconds - hours * oneHour):milliseconds;
	if (milliseconds >= oneMinute){
	minutes = Math.floor(milliseconds / oneMinute);
}
milliseconds = minutes > 0 ? (milliseconds - minutes * oneMinute):milliseconds;
	if (milliseconds >= oneSecond){
	seconds = Math.floor(milliseconds / oneSecond);
}
milliseconds = seconds > 0 ? (milliseconds - seconds * oneSecond):milliseconds;
	if (hours > 0){
	result = (hours > 9 ? hours:"0" + hours) + ":";
}
else{
	result = "00:";
}
if (minutes > 0){
	result += (minutes > 9 ? minutes:"0" + minutes) + ":";
}
else{
	result += "00:";
}
if (seconds > 0){
	result += (seconds > 9 ? seconds:"0" + seconds);
}
else{
	result += "00";
}
return result;
}
}
);
	//buttons$('#startBtn').click(function(){
	$('#runner').runner('start');
	$(this).addClass('activeBtn');
	$('#stopBtn').removeClass('activeBtn');
}
);
	$('#stopBtn').click(function(){
	$('#runner').runner('stop');
	$(this).addClass('activeBtn');
	$('#startBtn').removeClass('activeBtn');
}
);
	$('#resetBtn').click(function(){
	$('#runner').runner('reset');
	$('#stopBtn').removeClass('activeBtn');
	$('#startBtn').removeClass('activeBtn');
}
);

CSS代码(default.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}

CSS代码(style.css):

html,body{height:100%;font-size:10px;}
.container-fluid{min-height:100%;height:100%;background:#772953;text-align:center;}
.fill{width:100%;height:100%;min-height:100%;background:#772953;padding-top:2%;padding-bottom:5%;}
#runner{font-size:20rem;color:#fff;font-family:'Nixie One',cursive;font-weight:300;text-shadow:0 19px 38px rgba(0,0,0,0.30),0 15px 12px rgba(0,0,0,0.22);}
/*button styles */
button{height:10rem;width:10rem;border:2px solid #BB94A9;border-radius:50%;transition:all .5s ease;box-shadow:0 19px 38px rgba(0,0,0,0.30),0 15px 12px rgba(0,0,0,0.22);}
button:hover{transform:rotate(360deg);cursor:pointer;}
button:focus{transform:scale(2);outline:0;z-index:999;border-color:#DD4814;box-shadow:0 19px 38px rgba(0,0,0,0.30),0 15px 12px rgba(0,0,0,0.22);}
#startBtn{background:url("../img/icon-play.svg");background-size:contain;}
#stopBtn{background:url("../img/icon-pause.svg");background-size:contain;}
#resetBtn{background:url("../img/icon-replay.svg");background-size:contain;}
.activeBtn{transform:scale(2);z-index:999;border-color:#DD4814;box-shadow:0 19px 38px rgba(0,0,0,0.30),0 15px 12px rgba(0,0,0,0.22);}
.centered button{text-align:center;}
@media(max-width:920px){#runner{font-size:18rem;}
}
@media(max-width:830px){#runner{font-size:16rem;}
}
@media(max-width:740px){#runner{font-size:14rem;}
}
@media(max-width:650px){#runner{font-size:12rem;}
}
@media(max-width:560px){#runner{font-size:10rem;}
button{width:4rem;height:4rem;}
}
@media(max-width:470px){#runner{font-size:8rem;}
}
@media(max-width:390px){#runner{font-size:6rem;}
}

附件:下载该文件资源,减少时间成本(增值服务)