CSS3超酷3D像素电子时钟动画特效

这是一款CSS3超酷3D像素电子时钟动画特效。该电子时钟特效中，电子时钟有多个立方体组成，并在时间跳动使，移动立方体产生动画效果，非常炫酷。

使用方法

HTML代码

整个电子时钟优94个block组成。

<div class="container">
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="surface">
        <div class="block b1">
            <div class="block-outer">
                <div class="block-inner">
                    <div class="bottom"></div>
                    <div class="front"></div>
                    <div class="left"></div>
                    <div class="right"></div>
                </div>
            </div>
        </div>
        ......
    </div>
</div>        
		

CSS代码

.container, .surface, .block, .block-outer, .block-inner {
  transform-style: preserve-3d;
}

.container, .block, .digit {
  position: absolute;
}

.container {
  animation: bounce 2s cubic-bezier(0.4, 0.1, 0.6, 0.9) infinite;
  display: flex;
  margin: auto;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 29.7em;
  height: 10em;
  perspective: 800px;
}

.surface {
  animation: tilt 2s -1.5s cubic-bezier(0.4, 0.1, 0.6, 0.9) infinite;
  display: block;
  width: 27em;
  height: 1em;
  margin: auto;
  transform: translateY(2.5em) rotateX(105deg) rotateZ(0deg);
  will-change: transform;
}

.block {
  bottom: 0;
}

.block-inner div {
  background-color: #74d447;
}
.block-inner > div {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  position: absolute;
  width: 1em;
  height: 1em;
}
.block-inner > div.top:before, .block-inner > div.bottom:before, .block-inner > div.left:before, .block-inner > div.right:before {
  background-color: #000;
  content: "";
  width: 100%;
  height: 100%;
}
.block-inner > div.top:before, .block-inner > div.bottom:before {
  opacity: 0.2;
}
.block-inner > div.left:before, .block-inner > div.right:before {
  opacity: 0.4;
}

.block-outer, .block-inner {
  position: relative;
  width: 1em;
}

.block-outer {
  transition: transform 0.3s;
}

.block-inner {
  transform: rotateX(-90deg) translateZ(1em);
}

.back {
  transform: translateZ(-1em) rotateY(180deg);
}

.left {
  transform-origin: center left;
  transform: rotateY(270deg) translateX(-1em);
}

.right {
  transform-origin: top right;
}

.top, .bottom {
  transform-origin: top center;
}

.b1 {
  transform: translate3d(0.1em, -0.9em, 4.9em);
}
.b1 .block-inner div.top, .b1 .block-inner div.bottom {
  width: 0.8em;
  height: 0.8em;
}
.b1 .block-inner div.top {
  transform: rotateX(-90deg) translateY(0.2em);
}
.b1 .block-inner div.bottom {
  transform: rotateX(-90deg) translateY(0.2em) translateZ(0.8em);
}
.b1 .block-inner div.front, .b1 .block-inner div.back {
  width: 0.8em;
  height: 0.8em;
}
.b1 .block-inner div.front {
  transform: translateZ(-0.2em);
}
.b1 .block-inner div.left, .b1 .block-inner div.right {
  width: 0.8em;
  height: 0.8em;
}
.b1 .block-inner div.right {
  transform: rotateY(-270deg) translate3d(1em, 0, 0em);
}
		

codepen网址：https://codepen.io/jkantner/pen/KQaZdp