svg+css+js实现一个立方体三维数字时间时钟显示效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：svg+css+js实现一个立方体三维数字时间时钟显示效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  --area: 3.75vmin;
  --y: #f8e8aa;
  --w: #fdf5f1;
  --o: #fd4109;
  --lb: #ade8e5;
  --p: #479bc6;
  --db: #222c47;
  --z: 1;
  --left: 0;
  background: #479bc6;
  overflow: hidden;
  filter: url(#squiggles);
}
body:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  top: calc(50% + (var(--area) * 1.25));
  left: 0;
  backdrop-filter: blur(3px);
  z-index: 3;
  background: rgba(71, 155, 198, 0.85);
}
body #wrap {
  width: 75vmin;
  height: 11.25vmin;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 1.5vmin;
  perspective: 100vmin;
  position: relative;
  transform: scale(0.75) translateZ(0px) translateY(-7.5vmin);
  -webkit-box-reflect: below 15vmin;
}
body #wrap * {
  transform-style: preserve-3d;
}
body #wrap .block {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: "col1 col2 col3" "col4 col5 col6" "col7 col8 col9";
  z-index: 3;
  transition: 0.3s ease-in-out;
}
body #wrap .block:nth-of-type(2):before, body #wrap .block:nth-of-type(2):after, body #wrap .block:nth-of-type(4):before, body #wrap .block:nth-of-type(4):after {
  content: "";
  position: absolute;
  width: 2.5vmin;
  height: 2.5vmin;
  background: var(--lb);
  border-radius: 100%;
  left: calc(var(--area) * 3.5);
  top: 0;
  transform: translateZ(calc(var(--area) * -1.5)) rotateX(25deg);
}
body #wrap .block:nth-of-type(2):after, body #wrap .block:nth-of-type(4):after {
  top: calc(var(--area) * 1.5);
}
body #wrap .block * {
  backface-visibility: hidden;
}
body #wrap .block:nth-of-type(1) {
  animation: wobbling 1s ease-in-out infinite alternate -0.25s;
}
body #wrap .block:nth-of-type(2) {
  animation: wobbling 1s ease-in-out infinite alternate -0.5s;
}
body #wrap .block:nth-of-type(3) {
  animation: wobbling 1s ease-in-out infinite alternate -0.75s;
}
body #wrap .block:nth-of-type(4) {
  animation: wobbling 1s ease-in-out infinite alternate -1s;
}
body #wrap .block:nth-of-type(5) {
  animation: wobbling 1s ease-in-out infinite alternate -1.25s;
}
body #wrap .block:nth-of-type(6) {
  animation: wobbling 1s ease-in-out infinite alternate -1.5s;
}
@keyframes wobbling {
  from {
    transform: rotateX(-25deg) translateZ(calc(var(--area) * 2)) scaleZ(var(--z)) translateX(var(--left));
  }
  to {
    transform: rotateX(-55deg) translateZ(calc(var(--area) * 2)) scalez(var(--z)) translateX(var(--left));
  }
}
body #wrap .block:nth-of-type(-n + 2) {
  left: -50%;
}
body #wrap .block:nth-of-type(n + 5) {
  left: 50%;
}
body #wrap .block:nth-of-type(5) {
  z-index: 1;
}
body #wrap .block:last-of-type {
  z-index: 0;
}
body #wrap .block.cube0:first-of-type {
  --z: 0;
}
body #wrap .block.cube0:first-of-type ~ .block {
  --left: -50%;
}
body #wrap .block.cube0 .cube:nth-of-type(2), body #wrap .block.cube0 .cube:nth-of-type(5), body #wrap .block.cube0 .cube:nth-of-type(11), body #wrap .block.cube0 .cube:nth-of-type(14), body #wrap .block.cube0 .cube:nth-of-type(17), body #wrap .block.cube0 .cube:nth-of-type(23), body #wrap .block.cube0 .cube:nth-of-type(26) {
  left: 100%;
}
body #wrap .block.cube0 .cube:nth-of-type(2):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(5):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(11):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(14):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(17):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(23):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(26):nth-of-type(even) {
  left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(1) {
  left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(4) {
  left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(7) {
  left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(10) {
  left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(13) {
  left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(16) {
  left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(19) {
  left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(22) {
  left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(25) {
  left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(3) {
  left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(6) {
  left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(9) {
  left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(12) {
  left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(15) {
  left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(18) {
  left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(21) {
  left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(24) {
  left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(27) {
  left: -100%;
}
body #wrap .block.cube2 .cube:nth-of-type(5), body #wrap .block.cube2 .cube:nth-of-type(14), body #wrap .block.cube2 .cube:nth-of-type(23) {
  top: 100%;
}
body #wrap .block.cube2 .cube:nth-of-type(6), body #wrap .block.cube2 .cube:nth-of-type(15), body #wrap .block.cube2 .cube:nth-of-type(24) {
  top: 100%;
}
body #wrap .block.cube2 .cube:nth-of-type(10) {
  left: 200%;
}
body #wrap .block.cube2 .cube:nth-of-type(11) {
  left: 100%;
}
body #wrap .block.cube2 .cube:nth-of-type(13), body #wrap .block.cube2 .cube:nth-of-type(16) {
  transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube3 .cube:nth-of-type(10), body #wrap .block.cube3 .cube:nth-of-type(4), body #wrap .block.cube3 .cube:nth-of-type(13), body #wrap .block.cube3 .cube:nth-of-type(16) {
  left: 200%;
}
body #wrap .block.cube3 .cube:nth-of-type(11), body #wrap .block.cube3 .cube:nth-of-type(5), body #wrap .block.cube3 .cube:nth-of-type(14), body #wrap .block.cube3 .cube:nth-of-type(17) {
  left: 100%;
}
body #wrap .block.cube4 .cube:nth-of-type(4), body #wrap .block.cube4 .cube:nth-of-type(7), body #wrap .block.cube4 .cube:nth-of-type(13), body #wrap .block.cube4 .cube:nth-of-type(16), body #wrap .block.cube4 .cube:nth-of-type(22), body #wrap .block.cube4 .cube:nth-of-type(25) {
  left: 200%;
}
body #wrap .block.cube4 .cube:nth-of-type(11), body #wrap .block.cube4 .cube:nth-of-type(20), body #wrap .block.cube4 .cube:nth-of-type(5), body #wrap .block.cube4 .cube:nth-of-type(8), body #wrap .block.cube4 .cube:nth-of-type(14), body #wrap .block.cube4 .cube:nth-of-type(17), body #wrap .block.cube4 .cube:nth-of-type(23), body #wrap .block.cube4 .cube:nth-of-type(26) {
  left: 100%;
}
body #wrap .block.cube5 .cube:nth-of-type(4) {
  left: calc(300% - 100%);
}
body #wrap .block.cube5 .cube:nth-of-type(5) {
  left: calc(300% - 200%);
}
body #wrap .block.cube5 .cube:nth-of-type(13) {
  transform: translateZ(calc(var(--area) * -2));
  top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(13):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(13):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(13):nth-of-type(18) {
  top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(14) {
  transform: translateZ(calc(var(--area) * -2));
  top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(14):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(14):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(14):nth-of-type(18) {
  top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(15) {
  transform: translateZ(calc(var(--area) * -2));
  top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(15):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(15):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(15):nth-of-type(18) {
  top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(16) {
  transform: translateZ(calc(var(--area) * -2));
  top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(16):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(16):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(16):nth-of-type(18) {
  top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(17) {
  transform: translateZ(calc(var(--area) * -2));
  top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(17):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(17):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(17):nth-of-type(18) {
  top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(18) {
  transform: translateZ(calc(var(--area) * -2));
  top: -100%;
}
body #wrap .block.cube5 .cube:nth-of.........完整代码请登录后点击上方下载按钮下载查看