css实现立体多边形球体分裂loading加载动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现立体多边形球体分裂loading加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  overflow: hidden;
  background: #000;
}

.assembly {
  transform: rotate(60deg) rotateX(-10.8113deg);
  animation: switch 2s steps(1) infinite;
}
.assembly, .assembly *, .assembly :before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

@keyframes switch {
  50% {
    transform: rotate(-60deg) rotateX(-10.8113deg);
  }
}
.ring:nth-child(1) {
  transform: rotate(0turn) rotateY(0deg) translateY(-0.00469em);
}
.ring:nth-child(1) .rotor, .ring:nth-child(1) .exploder {
  animation: rot1 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.ring:nth-child(1) .exploder {
  animation-name: pos1;
}
.ring:nth-child(1) .piece:nth-child(1) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(1) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(1) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(2) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(2) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(2) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(3) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(3) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(3) .face:last-child {
  color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(4) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(4) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(4) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(1) .piece:nth-child(5) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(5) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(5) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(6) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(6) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(6) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(7) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(7) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(7) .face:last-child {
  color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(8) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(8) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(8) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(1) .piece:nth-child(9) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(9) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(9) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(10) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(10) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(10) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(11) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(11) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(11) .face:last-child {
  color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(12) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(12) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(12) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(1) .piece:nth-child(13) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(13) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(13) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(14) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(14) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(14) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(15) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(15) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(15) .face:last-child {
  color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(16) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(16) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(16) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(1) .piece:nth-child(17) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(17) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(17) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(18) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(18) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(18) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(19) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(19) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(19) .face:last-child {
  color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(20) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(20) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(20) .face:last-child {
  color: #4b1f0b;
}
@keyframes rot1 {
  0%, 0% {
    transform: none;
  }
  50%, 100% {
    transform: rotateY(72deg);
  }
}
@keyframes pos1 {
  0%, 50%, 100% {
    transform: none;
  }
  25% {
    transform: translateZ(1.5em) translateY(-0.75em);
  }
}
.ring:nth-child(2) {
  transform: rotate(0turn) rotateY(0deg) translateY(0em);
}
.ring:nth-child(2) .rotor, .ring:nth-child(2) .exploder {
  animation: rot2 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.ring:nth-child(2) .exploder {
  animation-name: pos2;
}
.ring:nth-child(2) .piece:nth-child(1) {
  transform: rotateY(0deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(1) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(2) .piece:nth-child(1) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(2) .piece:nth-child(2) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(2) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(2) .piece:nth-child(2) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(2) .piece:nth-child(3) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(3) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(2) .piece:nth-child(3) .face:last-child {
  color: #61290e;
}
.ring:nth-child(2) .piece:nth-child(4) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(2) .piece:nth-child(4) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(2) .piece:nth-child(4) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(2) .piece:nth-child(5) {
  transform: rotateY(-72deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(5) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(2) .piece:nth-child(5) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(2) .piece:nth-child(6) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(6) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(2) .piece:nth-child(6) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(2) .piece:nth-child(7) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(7) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(2) .piece:nth-child(7) .face:last-child {
  color: #61290e;
}
.ring:nth-child(2) .piece:nth-child(8) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(2) .piece:nth-child(8) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(2) .piece:nth-child(8) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(2) .piece:nth-child(9) {
  transform: rotateY(-144deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(9) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(2) .piece:nth-child(9) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(2) .piece:nth-child(10) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(10) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(2) .piece:nth-child(10) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(2) .piece:nth-child(11) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(11) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(2) .piece:nth-child(11) .face:last-child {
  color: #61290e;
}
.ring:nth-child(2) .piece:nth-child(12) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(2) .piece:nth-child(12) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(2) .piece:nth-child(12) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(2) .piece:nth-child(13) {
  transform: rotateY(-216deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(13) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(2) .piece:nth-child(13) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(2) .piece:nth-child(14) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(14) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(2) .piece:nth-child(14) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(2) .piece:nth-child(15) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(15) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(2) .piece:nth-child(15) .face:last-child {
  color: #61290e;
}
.ring:nth-child(2) .piece:nth-child(16) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(2) .piece:nth-child(16) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(2) .piece:nth-child(16) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(2) .piece:nth-child(17) {
  transform: rotateY(-288deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(17) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(2) .piece:nth-child(17) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(2) .piece:nth-child(18) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(18) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(2) .piece:nth-child(18) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(2) .piece:nth-child(19) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(19) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(2) .piece:nth-child(19) .face:last-child {
  color: #61290e;
}
.ring:nth-child(2) .piece:nth-child(20) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(2) .piece:nth-child(20) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(2) .piece:nth-child(20) .face:last-child {
  color: #4b1f0b;
}
@keyframes rot2 {
  0%, 12.5% {
    transform: none;
  }
  62.5%, 100% {
    transform: rotateY(72deg);
  }
}
@keyframes pos2 {
  0%, 62.5%, 100% {
    transform: none;
  }
  37.5% {
    transform: translateZ(1.5em) translateY(-0.75em);
  }
}
.ring:nth-child(3) {
  transform: rotate(0.5turn) rotateY(36deg) translateY(0em);
}
.ring:nth-child(3) .rotor, .ring:nth-child(3) .exploder {
  animation: rot3 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.ring:nth-child(3) .exploder {
  animation-name: pos3;
}
.ring:nth-child(3) .piece:nth-child(1) {
  transform: rotateY(0deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(1) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(3) .piece:nth-child(1) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(3) .piece:nth-child(2) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(2) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(3) .piece:nth-child(2) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(3) .piece:nth-child(3) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(3) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(3) .piece:nth-child(3) .face:last-child {
  color: #61290e;
}
.ring:nth-child(3) .piece:nth-child(4) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(3) .piece:nth-child(4) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(3) .piece:nth-child(4) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(3) .piece:nth-child(5) {
  transform: rotateY(-72deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(5) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(3) .piece:nth-child(5) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(3) .piece:nth-child(6) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(6) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(3) .piece:nth-child(6) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(3) .piece:nth-child(7) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(7) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(3) .piece:nth-child(7) .face:last-child {
  color: #61290e;
}
.ring:nth-child(3) .piece:nth-child(8) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(3) .piece:nth-child(8) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(3) .piece:nth-child(8) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(3) .piece:nth-child(9) {
  transform: rotateY(-144deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(9) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(3) .piece:nth-child(9) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(3) .piece:nth-child(10) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(10) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(3) .piece:nth-child(10) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(3) .piece:nth-child(11) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(11) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(3) .piece:nth-child(11) .face:last-child {
  color: #61290e;
}
.ring:nth-child(3) .piece:nth-child(12) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(3) .piece:nth-child(12) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(3) .piece:nth-child(12) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(3) .piece:nth-child(13) {
  transform: rotateY(-216deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(13) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(3) .piece:nth-child(13) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(3) .piece:nth-child(14) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(14) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(3) .piece:nth-child(14) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(3) .piece:nth-child(15) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(15) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(3) .piece:nth-child(15) .face:last-child {
  color: #61290e;
}
.ring:nth-child(3) .piece:nth-child(16) {
  transform: rotate(0.5turn) rotateY(252deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(3) .piece:nth-child(16) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(3) .piece:nth-child(16) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(3) .piece:nth-child(17) {
  transform: rotateY(-288deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(17) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(3) .piece:nth-child(17) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(3) .piece:nth-child(18) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(300deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(18) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(3) .piece:nth-child(18) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(3) .piece:nth-child(19) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(420deg) translateY(-2.3094em);
}
.ring:nth-child(3) .piece:nth-child(19) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(3) .piece:nth-child(19) .face:last-child {
  color: #61290e;
}
.ring:nth-child(3) .piece:nth-child(20) {
  transform: rotate(0.5turn) rotateY(324deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(360deg);
}
.ring:nth-child(3) .piece:nth-child(20) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(3) .piece:nth-child(20) .face:last-child {
  color: #4b1f0b;
}
@keyframes rot3 {
  0%, 25% {
    transform: none;
  }
  75%, 100% {
    transform: rotateY(-72deg);
  }
}
@keyframes pos3 {
  0%, 75%, 100% {
    transform: none;
  }
  50% {
    transform: translateZ(1.5em) translateY(-0.75em);
  }
}
.ring:nth-child(4) {
  transform: rotate(0.5turn) rotateY(36deg) translateY(-0.00469em);
}
.ring:nth-child(4) .rotor, .ring:nth-child(4) .exploder {
  animation: rot4 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.ring:nth-child(4) .exploder {
  animation-name: pos4;
}
.ring:nth-child(4) .piece:nth-child(1) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(4) .piece:nth-child(1) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(4) .piece:nth-child(1) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(4) .piece:nth-child(2) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(4) .piece:nth-child(2) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(4) .piece:nth-child(2) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(4) .piece:nth-child(3) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(4) .piece:nth-child(3) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(4) .piece:nth-child(3) .face:last-child {
  color: #61290e;
}
.ring:nth-child(4) .piece:nth-child(4) {
  transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(4) .piece:nth-child(4) .face:first-child {
  color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(4) .piece:nth-child(4) .face:last-child {
  color: #4b1f0b;
}
.ring:nth-child(4) .piece:nth-child(5) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(4) .piece:nth-child(5) .face:first-child {
  color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(4) .piece:nth-child(5) .face:last-child {
  color: #7c3412;
}
.ring:nth-child(4) .piece:nth-child(6) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(4) .piece:nth-child(6) .face:first-child {
  color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(4) .piece:nth-child(6) .face:last-child {
  color: #662b0f;
}
.ring:nth-child(4) .piece:nth-child(7) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(4) .piece:nth-child(7) .face:first-child {
  color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(4) .piece:nth-child(7) .face:last-child {
  color: #61290e;
}
.ring:nth-child(4) .piece:nth-child(8) {
  transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rot.........完整代码请登录后点击上方下载按钮下载查看