div+css实现三维立方体多彩方格动画旋转效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现三维立方体多彩方格动画旋转效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    BODY {
  background: #000;
  height: 100vh;
  perspective: 500px;
  perspective-origin: center center;
}

.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%);
  /* border: 1px solid #333; */
}

.cube {
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  -webkit-animation: rotation 10s linear infinite;
          animation: rotation 10s linear infinite;
}

.side {
  position: absolute;
  width: 250px;
  height: 250px;
  box-shadow: inset 0 0 175px;
  color: teal;
}
.side--top {
  transform: translateY(-125px) rotateX(-90deg);
}
.side--bottom {
  transform: translateY(125px) rotateX(-90deg) rotateZ(-180deg);
}
.side--left {
  transform: translateX(-125px) rotateY(-90deg);
}
.side--right {
  transform: translateX(125px) rotateY(90deg);
}
.side--front {
  transform: translateZ(125px);
}
.side--back {
  transform: translateZ(-125px) rotateZ(180deg);
}

@-webkit-keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
/*-- Created in shadowPainter : ) */
.dot {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -50px;
  left: -50px;
  -webkit-animation: 2s shadows linear infinite;
  animation: 2s shadows linear infinite;
  box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 #004358, 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 #1F8A70, 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 #BEDB39, 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 #FFE11A, 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 #FD7400, 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
}

/* Keyframes */
@-webkit-keyframes shadows {
  0% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 #004358, 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 #1F8A70, 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 #BEDB39, 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 #FFE11A, 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 #FD7400, 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  6.25% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 #004358, 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 #1F8A70, 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 #BEDB39, 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 #FFE11A, 250px 100px 0 0 #FD7400, 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  12.5% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 #004358, 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 #1F8A70, 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 #BEDB39, 250px 100px 0 0 #FFE11A, 250px 150px 0 0 #FD7400, 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  18.75% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 #004358, 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 #1F8A70, 250px 100px 0 0 #BEDB39, 250px 150px 0 0 #FFE11A, 250px 200px 0 0 #FD7400, 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 #004358, 250px 100px 0 0 #1F8A70, 250px 150px 0 0 #BEDB39, 250px 200px 0 0 #FFE11A, 250px 250px 0 0 #FD7400;
  }
  31.25% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 #FD7400, 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 #004358, 250px 150px 0 0 #1F8A70, 250px 200px 0 0 #BEDB39, 250px 250px 0 0 #FFE11A;
  }
  37.5% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 #FD7400, 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 #FFE11A, 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 #004358, 250px 200px 0 0 #1F8A70, 250px 250px 0 0 #BEDB39;
  }
  43.75% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 #FD7400, 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 #FFE11A, 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 #BEDB39, 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 #004358, 250px 250px 0 0 #1F8A70;
  }
  50% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 #FD7400, 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 #FFE11A, 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 #BEDB39, 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 #1F8A70, 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 #004358;
  }
  56.25% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 #FD7400, 50px 250px 0 0 #FFE11A, 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 #BEDB39, 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 #1F8A70, 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 #004358, 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  62.5% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 rgba(255, 255, 255, 0), 50px 150px 0 0 #FD7400, 50px 200px 0 0 #FFE11A, 50px 250px 0 0 #BEDB39, 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 #1F8A70, 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 #004358, 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  68.75% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 rgba(255, 255, 255, 0), 50px 100px 0 0 #FD7400, 50px 150px 0 0 #FFE11A, 50px 200px 0 0 #BEDB39, 50px 250px 0 0 #1F8A70, 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 #004358, 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  75% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 #FD7400, 50px 100px 0 0 #FFE11A, 50px 150px 0 0 #BEDB39, 50px 200px 0 0 #1F8A70, 50px 250px 0 0 #004358, 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 rgba(255, 255, 255, 0), 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  81.25% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 #FFE11A, 50px 100px 0 0 #BEDB39, 50px 150px 0 0 #1F8A70, 50px 200px 0 0 #004358, 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 #FD7400, 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 rgba(255, 255, 255, 0), 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  87.5% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 #BEDB39, 50px 100px 0 0 #1F8A70, 50px 150px 0 0 #004358, 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 255, 0), 100px 0px 0 0 rgba(255, 255, 255, 0), 100px 50px 0 0 #FFE11A, 100px 100px 0 0 rgba(255, 255, 255, 0), 100px 150px 0 0 rgba(255, 255, 255, 0), 100px 200px 0 0 rgba(255, 255, 255, 0), 100px 250px 0 0 rgba(255, 255, 255, 0), 150px 0px 0 0 rgba(255, 255, 255, 0), 150px 50px 0 0 #FD7400, 150px 100px 0 0 rgba(255, 255, 255, 0), 150px 150px 0 0 rgba(255, 255, 255, 0), 150px 200px 0 0 rgba(255, 255, 255, 0), 150px 250px 0 0 rgba(255, 255, 255, 0), 200px 0px 0 0 rgba(255, 255, 255, 0), 200px 50px 0 0 rgba(255, 255, 255, 0), 200px 100px 0 0 rgba(255, 255, 255, 0), 200px 150px 0 0 rgba(255, 255, 255, 0), 200px 200px 0 0 rgba(255, 255, 255, 0), 200px 250px 0 0 rgba(255, 255, 255, 0), 250px 0px 0 0 rgba(255, 255, 255, 0), 250px 50px 0 0 rgba(255, 255, 255, 0), 250px 100px 0 0 rgba(255, 255, 255, 0), 250px 150px 0 0 rgba(255, 255, 255, 0), 250px 200px 0 0 rgba(255, 255, 255, 0), 250px 250px 0 0 rgba(255, 255, 255, 0);
  }
  93.75% {
    box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0), 0px 50px 0 0 rgba(255, 255, 255, 0), 0px 100px 0 0 rgba(255, 255, 255, 0), 0px 150px 0 0 rgba(255, 255, 255, 0), 0px 200px 0 0 rgba(255, 255, 255, 0), 0px 250px 0 0 rgba(255, 255, 255, 0), 50px 0px 0 0 rgba(255, 255, 255, 0), 50px 50px 0 0 #1F8A70, 50px 100px 0 0 #004358, 50px 150px 0 0 rgba(255, 255, 255, 0), 50px 200px 0 0 rgba(255, 255, 255, 0), 50px 250px 0 0 rgba(255, 255, 2.........完整代码请登录后点击上方下载按钮下载查看