jquery+css实现数字时钟翻转显示时间效果代码-html代码-BFW代码库

jquery+css实现数字时钟翻转显示时间效果代码

代码语言：html

所属分类：动画

代码描述：jquery+css实现数字时钟翻转显示时间效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
<style>
    body {
  height: 100vh;
  font-family: "Share Tech Mono", monospace;
  background-color: #F1D3D3;
  color: #F1D3D3;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translate3d(0, -50%, 0);
}

.clock {
  font-size: 12vw;
  line-height: 1;
}

.hours:after, .minutes:after {
  content: ":";
  color: #1539CF;
}

.digit {
  width: 0.6em;
  height: 1em;
  display: inline-block;
  position: relative;
  margin: 5px;
  text-align: center;
}

.showing, .below, .above {
  width: 0.6em;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1539CF;
  border: 2px solid #1539CF;
  border-radius: 15px;
}

.showing {
  transform: perspective(100vh) rotateX(0) translateY(0%);
  transform-origin: 50% 100%;
  transition: transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.below {
  transform: perspective(100vh) rotateX(-90deg) translateY(140%);
  transform-delay: 0ms;
  transition: transform 0;
}

.above {
  transform: perspective(100vh) rotateX(90deg) translateY(-140%);
  transform-origin: 50% 0%;
  transform-delay: 0ms;
  transition: transform 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.sig {
  position: fixed;
  bottom: 5px;
  right: 5px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  font-family: sans-serif;
  color: rgba(0, 0, 0, 0.4);
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="center"><span class="clock"> <span class="hours"><span class="digit"><span class="showing"></span><span class="below"></span></span><span class="digit"><span class="showing"></span><span class="below"></span></span></span><span class="minutes"><span class="digit"><span class="showing"></span><span class="below"></span></span><span class="digit"><span class="showing"></span><span class="below"></span></span></span><span class="seconds"><span class="digit"><span class="showing"></span><span class="below"></span></span><span class="digit"><span cla.........完整代码请登录后点击上方下载按钮下载查看