<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>记分牌时钟</title>
<style>
body{background:#ddd;}
#wrap{margin-top:150px;text-align:center;}
.box,.box span,.box div{
width:70px;
height:120px;
display:block;
line-height:120px;
font-size:100px;
text-shadow:0 0 5px #999;
font-family:'Helvetica';
}
.box span{
background-image:-webkit-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
background-image:-moz-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
background-image:-ms-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
background-image:-o-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
border-radius:10px;
box-shadow:0 2px 5px #666,0 -2px 5px #666;
}
.box{
display:inline-block;
border-radius:10px;
position:relative;
perspective:400px;
margin:5px;
}
.box .top{
position:absolute;
height:50%;
overflow:hidden;
left:0;
top:0;
box-shadow:0 -2px 5px #666;border-radius:10px 10px 0 0;
-webkit-transition:all 0.7s;
-webkit-transform-origin:0 100%;
-webkit-transform-style:preserve-3d;
-moz-transition:all 0.7s;
-moz-transform-origin:0 100%;
-moz-transform-style:preserve-3d;
-ms-transition:all 0.7s;
-ms-transform-origin:0 100%;
-ms-transform-style:preserve-3d;
-o-transition:all 0.7s;
-o-transform-origin:0 100%;
-o-transform-style:preserve-3d;
}
.box .move{
overflow:hidden;
position:absolute;
bottom:0;
left:0;
height:50%;
perspective:400px;
}
.box .move div{
position:absolute;
left:0;
bottom:0;
height:100%;
}
.box .move .back span,.box .move .front span{
position:absolute;
left:0;
bottom:0;
overflow:hidden;
}
.box .move .back{
border-radius:0 0 10px 10px;
box-shadow:0 2px 5px #666;
z-index:2;
overflow:hidden;
-webkit-transition:all 0.7s;
-webkit-transform:rotateX(-180deg);
-webkit-transform-origin:0 0;
-webkit-transform-style:preserve-3d;
-moz-transition:all 0.7s;
-moz-transform:rotateX(180deg);
-moz-transform-origin:0 0;
-moz-transform-style:preserve-3d;
-ms-transition:all 0.7s;
-ms-transform:rotateX(180deg);
-ms-transform-origin:0 0;
-ms-transform-style:preserve-3d;
-o-transition:all 0.7s;
-o-transform:rotateX(180deg);
-o-transform-origin:0 0;
-o-transform-style:preserve-3d;
}
#wrap .box.active .top{
-webkit-transform:translateZ(2px) rotateX(180deg);
-moz-transform:translateZ(2px) rotateX(180deg);
-ms-transform:translateZ(2px) rotateX(180deg);
-o-transform:translateZ(2px) rotateX(180deg);
}
#wrap .box.active .back{
-webkit-transform:translateZ(2px) rotateX(0deg);
-moz-transform:translateZ(2px) rotateX(0deg);
-ms-transform:translateZ(2px) rotateX(0deg);
-o-transform:translateZ(2px) rotateX(0deg);
}
</style>
</head>
<body>
<div id="wrap">
</div>
<script>
window.οnlοad=function(){
var wrap=document.getElementById('wrap');
var boxArr=[];
var lastTime='000000';
var boxInner='';
for(var i=0;i<8;i++){
var box=document.createElement('div');
box.className='box';
if((i+1)%3){
boxArr.push(box);
boxInner='<span>0</span><div class="top"><span>0</span></div><div class="move"><div class="back"><span>0</span></div><div class="front"><span>0</span></div></div>';
}else{
boxInner='<span class="maohao">:</span>'
}
box.innerHTML=boxInner;
wrap.appendChild(box);
}
function timeString(n){
return n<10 ? '0'+n : n + '';
}
function inner(){
var time=new Date();
var curTime=timeString(time.getHours())+timeString(time.getMinutes())+timeString(time.getSeconds());
for(var i=0;i<curTime.length;i++){
if(curTime.charAt(i) != lastTime.charAt(i)){
boxArr[i].className='box';
boxArr[i].innerHTML='<span>'+curTime[i]+'</span><div class="top"><span>'+lastTime[i]+'</span></div><div class="move"><div class="back"><span>'+curTime[i]+'</span></div><div class="front"><span>'+lastTime[i]+'</span></div></div>';
(function(n){
setTimeout(function(){
n.className='box active';
},20)
})(boxArr[i])
}
}
lastTime=curTime;
}
setInterval(inner, 1000)
}
</script>
</body>
</html>
记分牌时钟
最新推荐文章于 2021-11-21 20:55:12 发布