div+css实现三维立方体撕裂切片动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：div+css实现三维立方体撕裂切片动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
 <style>
     .cube {
  height: 15rem;
  width: 15rem;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  -webkit-animation: cube 2.63s linear infinite;
          animation: cube 2.63s linear infinite;
}
.cube:before, .cube:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  -webkit-animation: cube-outer 2.63s linear infinite;
          animation: cube-outer 2.63s linear infinite;
}
.cube:before {
  background: #222;
  transform: rotateY(-90deg) translateZ(7.5rem);
}
.cube:after {
  background: #fefefe;
  transform: rotateX(90deg) translateZ(7.5rem);
}

@-webkit-keyframes cube {
  from {
    transform: rotateX(-30deg) rotateY(45deg);
  }
  to {
    transform: rotateX(-30deg) rotateY(135deg);
  }
}

@keyframes cube {
  from {
    transform: rotateX(-30deg) rotateY(45deg);
  }
  to {
    transform: rotateX(-30deg) rotateY(135deg);
  }
}
@-webkit-keyframes cube-outer {
  from {
    opacity: 1;
  }
  1.1787072243%, 79.8098859316% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cube-outer {
  from {
    opacity: 1;
  }
  1.1787072243%, 79.8098859316% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.backface {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  background: #222;
  transform: translateZ(-0.5rem) rotateZ(-90deg) rotateY(180deg);
}

.face, .backface {
  /* opacity: 0.5; */
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.face:before, .face:after, .backface:before, .backface:after {
  position: absolute;
  content: "";
  display: block;
}
.face:before, .backface:before {
  height: 100%;
  width: 0.5rem;
  transform-origin: left;
  transform: rotateY(-270deg);
  left: 0;
  top: 0;
}
.face:after, .backface:after {
  width: 100%;
  height: 0.5rem;
  transform-origin: top;
  transform: rotateX(270deg);
  left: 0;
  top: 0;
}

.face {
  height: 100%;
  width: 100%;
  background: #222;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.face:last-child {
  background-color: #222;
}
.face:first-child > .backface {
  background-color: gray;
}
.face:nth-child(2n):after {
  top: 100%;
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
.face:nth-child(2n):before {
  background: gray;
  -webkit-animation: gray-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: gray-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n) > .backface:before {
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n) > .backface:after {
  top: 100%;
  background: #222;
  -webkit-animation: black-white 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: black-white 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n-1):after {
  top: 100%;
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n-1):before {
  background: gray;
  -webkit-animation: gray-white 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: gray-white 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n-1) > .backface {
  transform: translateZ(-0.5rem) rotateZ(-90deg) rotateY(180deg);
}
.face:nth-child(2n-1) > .backface:before {
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n-1) > .backface:after {
  top: 100%;
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(1) {
  -webkit-animation-name: face-1;
          animation-name: face-1;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(2) {
  -webkit-animation-name: face-2;
          animation-name: face-2;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(3) {
  -webkit-animation-name: face-3;
          animation-name: face-3;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(4) {
  -webkit-animation-name: face-4;
          animation-name: face-4;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(5) {
  -webkit-animation-name: face-5;
          animation-name: face-5;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(6) {
  -webkit-animation-name: face-6;
          animation-name: face-6;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(7) {
  -webkit-animation-name: face-7;
          animation-name: face-7;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(8) {
  -webkit-animation-name: face-8;
          animation-name: face-8;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(9) {
  -webkit-animation-name: face-9;
          animation-name: face-9;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(10) {
  -webkit-animation-name: face-10;
          animation-name: face-10;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(11) {
  -webkit-animation-name: face-11;
          animation-name: face-11;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(12) {
  -webkit-animation-name: face-12;
          animation-name: face-12;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(13) {
  -webkit-animation-name: face-13;
          animation-name: face-13;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(14) {
  -webkit-animation-name: face-14;
          animation-name: face-14;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(15) {
  -webkit-animation-name: face-15;
          animation-name: face-15;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(16) {
  -webkit-animation-name: face-16;
          animation-name: face-16;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(17) {
  -webkit-animation-name: face-17;
          animation-name: face-17;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(18) {
  -webkit-animation-name: face-18;
          animation-name: face-18;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(19) {
  -webkit-animation-name: face-19;
          animation-name: face-19;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(20) {
  -webkit-animation-name: face-20;
          animation-name: face-20;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(21) {
  -webkit-animation-name: face-21;
          animation-name: face-21;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(22) {
  -webkit-animation-name: face-22;
          animation-name: face-22;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(23) {
  -webkit-animation-name: face-23;
          animation-name: face-23;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(24) {
  -webkit-animation-name: face-24;
          animation-name: face-24;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(25) {
  -webkit-animation-name: face-25;
          animation-name: face-25;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(26) {
  -webkit-animation-name: face-26;
          animation-name: face-26;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(27) {
  -webkit-animation-name: face-27;
          animation-name: face-27;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(28) {
  -webkit-animation-name: face-28;
          animation-name: face-28;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(29) {
  -webkit-animation-name: face-29;
          animation-name: face-29;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: i.........完整代码请登录后点击上方下载按钮下载查看