另一种时钟设计-html代码-BFW代码库

另一种时钟设计

代码语言：html

所属分类：其他

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


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

<title> Clock</title>
<style>
    @import url("https://fonts.googleapis.com/css?family=Old+Standard+TT");
body {
  font-family: 'Old Standard TT', serif;
  background-color: #1f1f1f;
  color: rgba(255, 255, 255, 0.1);
  margin: 0;
  font-size: 24px;
  overflow: hidden;
}
body > div {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  white-space: nowrap;
}
body > div > div {
  display: inline-flex;
  flex-direction: column-reverse;
}
body > div > div:not(:last-child) {
  margin-right: 1em;
}
body > div > div:nth-child(3n - 1) {
  margin-right: 2em;
  position: relative;
}
body > div > div:nth-child(3n - 1):after {
  content: ':';
  font-size: 2em;
  color: white;
  position: absolute;
  right: -0.675em;
  bottom: -0.2em;
}
body > div > div > div {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  transition: color 350ms ease-out, -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, color 350ms ease-out;
  transition: transform 200ms ease-in-out, color 350ms ease-out, -webkit-transform 200ms ease-in-out;
}
body > div > div > div.highlight {
  -webkit-transform: rotate(0deg) scale(2);
          transform: rotate(0deg) scale(2);
  color: white;
}
body > div > div > div.highlight ~ div {
  -webkit-transform: rotate(-90deg) translate3D(0.4em, 0, 0);
          transform: rotate(-90deg) translate3D(0.4em, 0, 0);
}

  </style>

</head>
<body translate="no">
<div>
<div>
<div>0</div>
<div>1</div>
<div>.........完整代码请登录后点击上方下载按钮下载查看