仿腾讯吃鸡游戏倒计时页面数字时钟效果

<style>.ctime {width:545px; height:114px; margin:0 auto;}
.ctime { margin-top: 28px;}
.ctime_p,.ctime_s{display:inline;float:left;margin-right:1px;width:43px;height:78px;overflow:hidden;text-align:center;color:#666;background:url(https://out.img.pan.lizhenqiu.com/FrrYOBmuNe7MG4Eg3Uo-2kxVP40b) no-repeat; text-indent: -9999px; overflow: hidden;}
.ctime_s{margin:0 20px; width:20px; height:67px; background-position: -150px 26px;}
.ctime_3 {display:none;}
.ctime_n0 {background-position: -156px -44px;}
.ctime_n1 {background-position: -156px -131px;}
.ctime_n2 {background-position: -156px -219px;}
.ctime_n3 {background-position: -156px -306px;}
.ctime_n4 {background-position: -156px -392px;}
.ctime_n5 {background-position: -156px -480px;}
.ctime_n6 {background-position: -156px -567px;}
.ctime_n7 {background-position: -156px -654px;}
.ctime_n8 {background-position: -156px -741px;}
.ctime_n9 {background-position: -156px -828px;}
#ctimeP1_0.ctime_n0 {background-position: -1px -44px;}
#ctimeP1_0.ctime_n1 {background-position: -1px -131px;}
#ctimeP1_0.ctime_n2 {background-position: -1px -219px;}
#ctimeP1_0.ctime_n3 {background-position: -1px -306px;}
#ctimeP1_0.ctime_n4 {background-position: -1px -392px;}
#ctimeP1_0.ctime_n5 {background-position: -1px -480px;}
#ctimeP1_0.ctime_n6 {background-position: -1px -567px;}
#ctimeP1_0.ctime_n7 {background-position: -1px -654px;}
#ctimeP1_0.ctime_n8 {background-position: -1px -741px;}
#ctimeP1_0.ctime_n9 {background-position: -1px -828px;}
#ctimeP1_1.ctime_n0 {background-position: -57px -44px;}
#ctimeP1_1.ctime_n1 {background-position: -57px -131px;}
#ctimeP1_1.ctime_n2 {background-position: -57px -219px;}
#ctimeP1_1.ctime_n3 {background-position: -57px -306px;}
#ctimeP1_1.ctime_n4 {background-position: -57px -392px;}
#ctimeP1_1.ctime_n5 {background-position: -57px -480px;}
#ctimeP1_1.ctime_n6 {background-position: -57px -567px;}
#ctimeP1_1.ctime_n7 {background-position: -57px -654px;}
#ctimeP1_1.ctime_n8 {background-position: -57px -741px;}
#ctimeP1_1.ctime_n9 {background-position: -57px -828px;}
#ctimeP2_0.ctime_n0,#ctimeP2_1.ctime_n0 {background-position: -106px -44px;}
#ctimeP2_0.ctime_n1,#ctimeP2_1.ctime_n1 {background-position: -106px -131px;}
#ctimeP2_0.ctime_n2,#ctimeP2_1.ctime_n2 {background-position: -106px -219px;}
#ctimeP2_0.ctime_n3,#ctimeP2_1.ctime_n3 {background-position: -106px -306px;}
#ctimeP2_0.ctime_n4,#ctimeP2_1.ctime_n4 {background-position: -106px -392px;}
#ctimeP2_0.ctime_n5,#ctimeP2_1.ctime_n5 {background-position: -106px -480px;}
#ctimeP2_0.ctime_n6,#ctimeP2_1.ctime_n6 {background-position: -106px -567px;}
#ctimeP2_0.ctime_n7,#ctimeP2_1.ctime_n7 {background-position: -106px -654px;}
#ctimeP2_0.ctime_n8,#ctimeP2_1.ctime_n8 {background-position: -106px -741px;}
#ctimeP2_0.ctime_n9,#ctimeP2_1.ctime_n9 {background-position: -106px -828px;}
.nani{-webkit-animation:nani 0.8s;}
@-webkit-keyframes nani{
  0% {opacity: 0;-webkit-transform-origin: 50% 0%;-webkit-transform: perspective(800px) rotateX(90deg);}
  50% {opacity: 1;-webkit-transform-origin: 50% 0%;-webkit-transform: perspective(800px) rotateX(-20deg);}
  100% {opacity: 1;-webkit-transform-origin: 50% 0%;-webkit-transform: perspective(800px) rotateX(0deg);}
}
</style>
<p id="ctime" class="ctime">
  <span id="ctimeP1_0" class="ctime_p ctime_p1_0 ctime_n0">0</span>
  <span id="ctimeP1_1" class="ctime_p ctime_p1_1 ctime_n1">1</span>
  <span class="ctime_s ctime_0">天</span>
  <span id="ctimeP2_0" class="ctime_p ctime_p2_0 ctime_n1">1</span>
  <span id="ctimeP2_1" class="ctime_p ctime_p2_1 ctime_n4">4</span>
  <span class="ctime_s ctime_1">时</span>
  <span id="ctimeP3_0" class="ctime_p ctime_p3_0 ctime_n4">4</span>
  <span id="ctimeP3_1" class="ctime_p ctime_p3_1 ctime_n5">5</span>
  <span class="ctime_s ctime_2">分</span>
  <span id="ctimeP4_0" class="ctime_p ctime_p4_0 ctime_n0">0</span>
  <span id="ctimeP4_1" class="ctime_p ctime_p4_1 ctime_n3 nani">3</span>
  <span class="ctime_s ctime_3">秒</span></p>
  <script>
  function countDown(t,e){function n(){var t,e,a,r,s,c;return e=+new Date+o.gap,t=Math.floor((o.ttime-e)/1e3),0>=t?(t=0,clearTimeout(o.timer),i(["00","00","00","00"],o.el,o.id,o.nani),void o.done()):(a=t%60,t=(t-a)/60,r=t%60,t=(t-r)/60,s=t%24,t=(t-s)/24,c=t,i([c,s,r,a],o.el,o.id,o.nani),void(o.timer=setTimeout(n,1e3)))}function i(t,e,n,i){for(var s=0;s<t.length;s++)t[s]=""+t[s],1==t[s].length&&(t[s]="0"+t[s]);0!==o.lastTs?r(t,o.lastTs,n,i):a(e,t,n,o.sp),o.lastTs=t}function a(t,e,n,i){for(var a=e.length,r="",o=0;a>o;o++){e[o]=e[o].split("");for(var s=0;s<e[o].length;s++)r+='<span id="'+n+"P"+(o+1)+"_"+s+'" class="'+n+"_p "+n+"_p"+(o+1)+"_"+s+" "+n+"_n"+e[o][s]+'">'+e[o][s]+"</span>";r+='<span class="'+n+"_s "+n+"_"+o+'">'+i[o]+"</span>"}t.innerHTML=r}function r(t,e,n,i){for(var a=0;a<t.length;a++)if(t[a]!==e[a]){t[a]=t[a].split("");for(var r=0;r<t[a].length;r++)if(t[a][r]!==e[a][r]){var o=document.getElementById(n+"P"+(a+1)+"_"+r);o.className=n+"_p "+n+"_p"+(a+1)+"_"+r+" "+n+"_n"+t[a][r]+" "+i,o.innerHTML=t[a][r],o.addEventListener&&o.addEventListener("webkitAnimationEnd",function(){this.classList.remove(i)},!1)}}}var o={nani:"nani",sp:[":",":",":",""],id:t,el:document.getElementById(t),gap:0,lastTs:0,ttime:0,timer:null,done:function(){}};for(p in e)o[p]=e[p];if(void 0!==o.ttime)return o.play=function(){n()},o.pause=function(){clearTimeout(o.timer)},o.play(),o}function getServerTime(){var t,e,n="http://"+window.location.hostname+"/favicon.ico?t="+Math.random();try{t=new XMLHttpRequest}catch(i){try{t=new ActiveXObject("Msxml2.XMLHTTP")}catch(i){try{t=new ActiveXObject("Microsoft.XMLHTTP")}catch(i){t=null}}}try{t.open("HEAD",n,!1),t.send()}catch(i){return{stime:new Date,stgap:0}}return e=new Date(t.getResponseHeader("Date")),{stime:e,stgap:e.getTime()-+new Date}}
//通过gdate.php获取本地与服务器时间差gap
var _gapTime = typeof(json_curdate)!=="undefined" ? +new Date(json_curdate.replace(/-/g,"/"))-(+new Date()) : 0;
var ctimer = new countDown("ctime",{ ttime:+new Date(2018,01,08,00,00,00), gap:_gapTime, sp:["天","时","分","秒"] })//PHP获取服务器时间

</script>