3D数字时钟

下载代码

html

css

分享到微信朋友圈

html

css

:root {
  --mouse-x: 0;
  --mouse-y: 0;
}

.time {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transform: translateZ(20px);
          transform: translateZ(20px);
  -webkit-transform: translateZ(20px) rotateX(calc(var(--mouse-y) * 45deg)) rotateY(calc(var(--mouse-x) * 45deg));
          transform: translateZ(20px) rotateX(calc(var(--mouse-y) * 45deg)) rotateY(calc(var(--mouse-x) * 45deg));
}

* {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.digit {
  height: 20vmin;
  width: 10vmin;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  margin: 0 1rem;
}
.digit, .digit:after, .digit:before {
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.5, 0, 0.5, 1);
  transition: -webkit-transform 1s cubic-bezier(0.5, 0, 0.5, 1);
  transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1);
  transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1), -webkit-transform 1s cubic-bezier(0.5, 0, 0.5, 1);
}
.digit:hover {
  -webkit-transform: translateZ(2vmax);
          transform: translateZ(2vmax);
}
.digit:hover:after, .digit:hover:before {
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
.digit:nth-child(2), .digit:nth-child(4) {
  margin-right: 3vmax;
}
.digit:nth-child(2):before, .digit:nth-child(2):after, .digit:nth-child(4):before, .digit:nth-child(4):after {
  content: '';
  background: white;
  display: block;
  position: absolute;
  text-align: center;
  width: 1vmax;
  height: 1vmax;
  left: calc(100% + 2vmax);
  box-shadow: 0 0 1rem #0BFDFD, inset 0 0 0.25vmax #0BFDFD;
  font-size: 8vmax;
  text-shadow: 0 0 1rem #0BFDFD;
  -webkit-animation: pulse 1s alternate cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: pulse 1s alternate cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.digit:nth-child(2):before, .digit:nth-child(4):before {
  top: 30%;
}
.digit:nth-child(2):after, .digit:nth-child(4):after {
  bottom: 30%;
}

@-webkit-keyframes pulse {
  to {
    opacity: 0.5;
  }
}

@keyframes pulse {
  to {
    opacity: 0.5;
  }
}
[data-hours^="0"] .digit:nth-child(1) :nth-child(4):before, [data-hours^="0"] .digit:nth-child(1) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="0"] .digit:nth-child(2) :nth-child(4):before, [data-hours$="0"] .digit:nth-child(2) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="0"] .digit:nth-child(3) :nth-child(4):before, [data-minutes^="0"] .digit:nth-child(3) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="0"] .digit:nth-child(4) :nth-child(4):before, [data-minutes$="0"] .digit:nth-child(4) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="0"] .digit:nth-child(5) :nth-child(4):before, [data-seconds^="0"] .digit:nth-child(5) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="0"] .digit:nth-child(6) :nth-child(4):before, [data-seconds$="0"] .digit:nth-child(6) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours^="1"] .digit:nth-child(1) :nth-child(1):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="1"] .digit:nth-child(1) :nth-child(2):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="1"] .digit:nth-child(1) :nth-child(4):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="1"] .digit:nth-child(1) :nth-child(5):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="1"] .digit:nth-child(1) :nth-child(6):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="1"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="1"] .digit:nth-child(2) :nth-child(2):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="1"] .digit:nth-child(2) :nth-child(4):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="1"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="1"] .digit:nth-child(2) :nth-child(6):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="1"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="1"] .digit:nth-child(3) :nth-child(2):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="1"] .digit:nth-child(3) :nth-child(4):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="1"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="1"] .digit:nth-child(3) :nth-child(6):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="1"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="1"] .digit:nth-child(4) :nth-child(2):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="1"] .digit:nth-child(4) :nth-child(4):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="1"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="1"] .digit:nth-child(4) :nth-child(6):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="1"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="1"] .digit:nth-child(5) :nth-child(2):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="1"] .digit:nth-child(5) :nth-child(4):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="1"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="1"] .digit:nth-child(5) :nth-child(6):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="1"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="1"] .digit:nth-child(6) :nth-child(2):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="1"] .digit:nth-child(6) :nth-child(4):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="1"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="1"] .digit:nth-child(6) :nth-child(6):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours^="2"] .digit:nth-child(1) :nth-child(1):before, [data-hours^="2"] .digit:nth-child(1) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="2"] .digit:nth-child(1) :nth-child(7):before, [data-hours^="2"] .digit:nth-child(1) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="2"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="2"] .digit:nth-child(2) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="2"] .digit:nth-child(2) :nth-child(7):before, [data-hours$="2"] .digit:nth-child(2) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="2"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="2"] .digit:nth-child(3) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="2"] .digit:nth-child(3) :nth-child(7):before, [data-minutes^="2"] .digit:nth-child(3) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="2"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="2"] .digit:nth-child(4) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="2"] .digit:nth-child(4) :nth-child(7):before, [data-minutes$="2"] .digit:nth-child(4) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="2"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="2"] .digit:nth-child(5) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="2"] .digit:nth-child(5) :nth-child(7):before, [data-seconds^="2"] .digit:nth-child(5) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="2"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="2"] .digit:nth-child(6) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="2"] .digit:nth-child(6) :nth-child(7):before, [data-seconds$="2"] .digit:nth-child(6) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="3"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="3"] .digit:nth-child(2) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="3"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="3"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="3"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="3"] .digit:nth-child(3) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="3"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="3"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="3"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="3"] .digit:nth-child(4) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="3"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="3"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="3"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="3"] .digit:nth-child(5) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="3"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="3"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="3"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="3"] .digit:nth-child(6) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="3"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="3"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="4"] .digit:nth-child(2) :nth-child(2):before, [data-hours$="4"] .digit:nth-child(2) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="4"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="4"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="4"] .digit:nth-child(2) :nth-child(6):before, [data-hours$="4"] .digit:nth-child(2) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="4"] .digit:nth-child(3) :nth-child(2):before, [data-minutes^="4"] .digit:nth-child(3) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="4"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="4"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="4"] .digit:nth-child(3) :nth-child(6):before, [data-minutes^="4"] .digit:nth-child(3) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="4"] .digit:nth-child(4) :nth-child(2):before, [data-minutes$="4"] .digit:nth-child(4) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="4"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="4"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="4"] .digit:nth-child(4) :nth-child(6):before, [data-minutes$="4"] .digit:nth-child(4) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="4"] .digit:nth-child(5) :nth-child(2):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="4"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="4"] .digit:nth-child(5) :nth-child(6):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="4"] .digit:nth-child(6) :nth-child(2):before, [data-seconds$="4"] .digit:nth-child(6) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="4"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="4"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="4"] .digit:nth-child(6) :nth-child(6):before, [data-seconds$="4"] .digit:nth-child(6) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="5"] .digit:nth-child(2) :nth-child(3):before, [data-hours$="5"] .digit:nth-child(2) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="5"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="5"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="5"] .digit:nth-child(3) :nth-child(3):before, [data-minutes^="5"] .digit:nth-child(3) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="5"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="5"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="5"] .digit:nth-child(4) :nth-child(3):before, [data-minutes$="5"] .digit:nth-child(4) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="5"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="5"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="5"] .digit:nth-child(5) :nth-child(3):before, [data-seconds^="5"] .digit:nth-child(5) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="5"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="5"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="5"] .digit:nth-child(6) :nth-child(3):before, [data-seconds$="5"] .digit:nth-child(6) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="5"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="5"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="6"] .digit:nth-child(2) :nth-child(3):before, [data-hours$="6"] .digit:nth-child(2) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="6"] .digit:nth-child(3) :nth-child(3):before, [data-minutes^="6"] .digit:nth-child(3) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="6"] .digit:nth-child(4) :nth-child(3):before, [data-minutes$="6"] .digit:nth-child(4) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="6"] .digit:nth-child(5) :nth-child(3):before, [data-seconds^="6"] .digit:nth-child(5) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="6"] .digit:nth-child(6) :nth-child(3):before, [data-seconds$="6"] .digit:nth-child(6) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="7"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="7"] .digit:nth-child(2) :nth-child(4):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="7"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="7"] .digit:nth-child(2) :nth-child(6):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="7"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="7"] .digit:nth-child(3) :nth-child(4):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="7"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="7"] .digit:nth-child(3) :nth-child(6):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="7"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="7"] .digit:nth-child(4) :nth-child(4):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="7"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="7"] .digit:nth-child(4) :nth-child(6):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="7"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="7"] .digit:nth-child(5) :nth-child(4):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="7"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="7"] .digit:nth-child(5) :nth-child(6):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="7"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="7"] .digit:nth-child(6) :nth-child(4):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="7"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="7"] .digit:nth-child(6) :nth-child(6):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="9"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="9"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="9"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="9"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="9"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="9"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="9"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="9"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="9"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="9"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

.line {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.line:before, .line:after {
  content: '';
  display: block;
  position: absolute;
  color: #0BFDFD;
  background: white;
  -webkit-transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1);
  transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1);
  border-radius: 1ch;
  box-shadow: 0 0 1rem #0BFDFD, inset 0 0 0.125vmin #0BFDFD;
}
.line:after {
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.1, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.1, 1);
}
.line:nth-child(2n - 1) {
  height: 50%;
  width: 0.5vmin;
}
.line:nth-child(2n - 1):before, .line:nth-child(2n - 1):after {
  height: calc(50% - 0.25vmin);
  width: 100%;
}
.line:nth-child(2n - 1):before {
  top: 0.25vmin;
  -webkit-transform-origin: center top;
          transform-origin: center top;
}
.line:nth-child(2n - 1):after {
  bottom: 0.25vmin;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.line:nth-child(2n) {
  width: 100%;
  height: 0.5vmin;
}
.line:nth-child(2n):before, .line:nth-child(2n):after {
  height: 100%;
  width: calc(50% - 0.25vmin);
}
.line:nth-child(2n):before {
  left: 0.25vmin;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.line:nth-child(2n):after {
  right: 0.25vmin;
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.line:nth-child(1) {
  top: 0;
  left: 0;
}
.line:nth-child(2) {
  top: 0;
  left: 0;
}
.line:nth-child(3) {
  top: 0;
  right: 0;
}
.line:nth-child(4) {
  top: 50%;
  left: 0;
}
.line:nth-child(5) {
  top: 50%;
  left: 0;
}
.line:nth-child(6) {
  bottom: 0;
  left: 0;
}
.line:nth-child(7) {
  top: 50%;
  right: 0;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #121212;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

*:before, *:after {
  content: '';
  display: block;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg