rx实现三维立体交互数字时钟效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：rx实现三维立体交互数字时钟效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
:root {
  --mouse-x: 0;
  --mouse-y: 0;
}

.time {
  display: flex;
  flex-direction: row;
  transform: translateZ(20px);
  transform: translateZ(20px) rotateX(calc(var(--mouse-y) * 45deg)) rotateY(calc(var(--mouse-x) * 45deg));
}

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

.digit {
  height: 20vmin;
  width: 10vmin;
  transform-style: preserve-3d;
  perspective: 1000px;
  margin: 0 1rem;
}
.digit, .digit:after, .digit:before {
  transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1);
}
.digit:hover {
  transform: translateZ(2vmax);
}
.digit:hover:after, .digit:hover:before {
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  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;
  transform: translateZ(-2vmax);
}

[data-seconds^="4"] .digit:nth-child(5) :nth-child(2):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(2):afte.........完整代码请登录后点击上方下载按钮下载查看