css3和javascript實現的時鐘效果

antzone發表於2017-04-13
CSSS3JavaScript

本章節分享一段程式碼例項，它利用css3和javascript實現了美觀的時鐘效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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: -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%;
  -ms-transform-origin: 0 100%;
  -o-transition: all 0.7s;
  -o-transform-origin: 0 100%;
}
.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;
  -ms-transform: rotateX(180deg);
  -ms-transform-origin: 0 0;
  -o-transition: all 0.7s;
  -o-transform: rotateX(180deg);
  -o-transform-origin: 0 0;
}
#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>
<script>
  window.onload = 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>
</head>
<body>
<div id="wrap"></div>
</body>
</html>

相關文章