3d数字时钟

下载代码

html

css

分享到微信朋友圈

html

css

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-type(18):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(18):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(18):nth-of-type(18) {
  top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(12) {
  left: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(11) {
  left: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(23), body #wrap .block.cube5 .cube:nth-of-type(24), body #wrap .block.cube5 .cube:nth-of-type(22) {
  top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(25), body #wrap .block.cube5 .cube:nth-of-type(26), body #wrap .block.cube5 .cube:nth-of-type(27) {
  top: -200%;
}
body #wrap .block.cube6 .cube:nth-of-type(5) {
  left: -100%;
}
body #wrap .block.cube6 .cube:nth-of-type(14):not(:nth-of-type(16)) {
  transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(15):not(:nth-of-type(16)) {
  transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(16):not(:nth-of-type(16)) {
  transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(17):not(:nth-of-type(16)) {
  transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(18):not(:nth-of-type(16)) {
  transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(12) {
  left: -200%;
}
body #wrap .block.cube6 .cube:nth-of-type(11) {
  left: -100%;
}
body #wrap .block.cube7 .cube:nth-of-type(3) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(4) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(5) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(10):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(11):nth-of-type(1n) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(6) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(7) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(8) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(19):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(20):nth-of-type(1n) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(9) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(10) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(11) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(28):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(29):nth-of-type(1n) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(12) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(13) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(14) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(37):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(38):nth-of-type(1n) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(15) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(16) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(17) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(46):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(47):nth-of-type(1n) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(18) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(19) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(20) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(55):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(56):nth-of-type(1n) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(21) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(22) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(23) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(64):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(65):nth-of-type(1n) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(24) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(25) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(26) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(73):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(74):nth-of-type(1n) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(27) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(28) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(29) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(82):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(83):nth-of-type(1n) {
  left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(1) {
  left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(2) {
  left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(10), body #wrap .block.cube7 .cube:nth-of-type(11) {
  transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube8 .cube:nth-of-type(5) {
  transform: translateZ(calc(var(--area) * -1.5));
}
body #wrap .block.cube8 .cube:nth-of-type(11) {
  top: 200%;
}
body #wrap .block.cube8 .cube:nth-of-type(25) {
  transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube8 .cube:nth-of-type(26) {
  transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube8 .cube:nth-of-type(27) {
  transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube9 .cube:nth-of-type(5) {
  transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube9 .cube:nth-of-type(11) {
  top: 200%;
}
body #wrap .block.cube9 .cube:nth-of-type(4), body #wrap .block.cube9 .cube:nth-of-type(13) {
  left: 200%;
}
body #wrap .block.cube9 .cube:nth-of-type(14) {
  left: 100%;
}
body #wrap .block.cube9 .cube:nth-of-type(22) {
  top: -100%;
}
body #wrap .block.cube9 .cube:nth-of-type(23) {
  top: -100%;
}
body #wrap .block.cube9 .cube:nth-of-type(24) {
  top: -100%;
}
body #wrap .block.cube9 .cube:nth-of-type(25) {
  transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube9 .cube:nth-of-type(26) {
  transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube9 .cube:nth-of-type(27) {
  transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block .cube {
  background: var(--y);
  position: relative;
  transition: 0.3s ease-in-out;
  left: 0;
  top: 0;
  z-index: 0;
  backface-visibility: hidden;
}
body #wrap .block .cube:nth-of-type(1) + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(1) + .cube + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(1) .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(10) + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(10) + .cube + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(10) .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(19) + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(19) + .cube + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(19) .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(28) + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(28) + .cube + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(28) .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(37) + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(37) + .cube + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(37) .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(46) + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(46) + .cube + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(46) .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(55) + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(55) + .cube + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(55) .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(64) + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(64) + .cube + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(64) .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(73) + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(73) + .cube + .cube .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(73) .side:last-of-type {
  box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube .side {
  position: absolute;
  width: 100%;
  height: 100%;
}
body #wrap .block .cube .side:first-of-type {
  top: 0.15vmin;
  left: -100%;
  background: var(--db);
  transform-origin: right;
  transform: rotateY(-90deg);
}
body #wrap .block .cube .side:last-of-type {
  top: -100%;
  left: 0;
  transform-origin: bottom;
  background: var(--lb);
  transform: rotateX(90deg);
}
body #wrap .block .cube .side:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: -0.05vmin;
  background: var(--db);
  transform: translateZ(calc((var(--area) * -1.05)));
}
body #wrap .block .cube:nth-of-type(1) {
  grid-area: col1;
  background: var(--y);
}
body #wrap .block .cube:nth-of-type(1):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--y);
  box-shadow: 0 0 0 0.05vmin var(--y);
  transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(10) {
  grid-area: col1;
  transform: translateZ(calc(var(--area) * -1));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(19) {
  grid-area: col1;
  transform: translateZ(calc(var(--area) * -2));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(2) {
  grid-area: col2;
  background: var(--y);
}
body #wrap .block .cube:nth-of-type(2):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--y);
  box-shadow: 0 0 0 0.05vmin var(--y);
  transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(11) {
  grid-area: col2;
  transform: translateZ(calc(var(--area) * -1));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(20) {
  grid-area: col2;
  transform: translateZ(calc(var(--area) * -2));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(3) {
  grid-area: col3;
  background: var(--y);
}
body #wrap .block .cube:nth-of-type(3):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--y);
  box-shadow: 0 0 0 0.05vmin var(--y);
  transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(12) {
  grid-area: col3;
  transform: translateZ(calc(var(--area) * -1));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(21) {
  grid-area: col3;
  transform: translateZ(calc(var(--area) * -2));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(4) {
  grid-area: col4;
  background: var(--y);
}
body #wrap .block .cube:nth-of-type(4):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--y);
  box-shadow: 0 0 0 0.05vmin var(--y);
  transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(13) {
  grid-area: col4;
  transform: translateZ(calc(var(--area) * -1));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(22) {
  grid-area: col4;
  transform: translateZ(calc(var(--area) * -2));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(5) {
  grid-area: col5;
  background: var(--y);
}
body #wrap .block .cube:nth-of-type(5):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--y);
  box-shadow: 0 0 0 0.05vmin var(--y);
  transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(14) {
  grid-area: col5;
  transform: translateZ(calc(var(--area) * -1));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(23) {
  grid-area: col5;
  transform: translateZ(calc(var(--area) * -2));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(6) {
  grid-area: col6;
  background: var(--y);
}
body #wrap .block .cube:nth-of-type(6):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--y);
  box-shadow: 0 0 0 0.05vmin var(--y);
  transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(15) {
  grid-area: col6;
  transform: translateZ(calc(var(--area) * -1));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(24) {
  grid-area: col6;
  transform: translateZ(calc(var(--area) * -2));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(7) {
  grid-area: col7;
  background: var(--y);
}
body #wrap .block .cube:nth-of-type(7):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--y);
  box-shadow: 0 0 0 0.05vmin var(--y);
  transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(16) {
  grid-area: col7;
  transform: translateZ(calc(var(--area) * -1));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(25) {
  grid-area: col7;
  transform: translateZ(calc(var(--area) * -2));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(8) {
  grid-area: col8;
  background: var(--y);
}
body #wrap .block .cube:nth-of-type(8):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--y);
  box-shadow: 0 0 0 0.05vmin var(--y);
  transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(17) {
  grid-area: col8;
  transform: translateZ(calc(var(--area) * -1));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(26) {
  grid-area: col8;
  transform: translateZ(calc(var(--area) * -2));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(9) {
  grid-area: col9;
  background: var(--y);
}
body #wrap .block .cube:nth-of-type(9):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--y);
  box-shadow: 0 0 0 0.05vmin var(--y);
  transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(18) {
  grid-area: col9;
  transform: translateZ(calc(var(--area) * -1));
  background: var(--o);
}
body #wrap .block .cube:nth-of-type(27) {
  grid-area: col9;
  transform: translateZ(calc(var(--area) * -2));
  background: var(--o);
}

JavaScript

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