纯css实现彩虹桥运动动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：纯css实现彩虹桥运动动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
  width: 100%;
  height: 100%;
}
.sky{
 display: flex;
  justify-content: space-between;
}
.sky-moon{
  width: 300px;
  height: 300px;
  opacity: 0.7;
}
.sky-clouds{
  margin-top:-90px;
   width: auto;
  height: 300px;
  opacity: 1;
}


body {
  
background:linear-gradient(to top, #000000 0% ,#000000 50%,#00000036 100%),url("")no-repeat  center center/cover;
  


  overflow: hidden;
  margin: 0;

perspective: 5px;
}

.clr {
  
  width: 1000px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  
  -webkit-transform: rotateX(-150deg) rotate(45deg);
          transform: rotateX(-150deg) rotate(45deg);
}
.clr .dot {
  float: left;
  width: 5px;
  height: 5px;
  background-color: #fff;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 50%;
  -webkit-animation: 1.5s identifier linear infinite;
          animation: 1.5s identifier linear infinite;
}
.clr .dot:nth-child(1) {
  background-color: #ff0300;
  box-shadow: #ff0300 0px 0px 50px 2px;
  -webkit-animation-delay: -0.07s;
          animation-delay: -0.07s;
}
.clr .dot:nth-child(2) {
  background-color: #ff0600;
  box-shadow: #ff0600 0px 0px 50px 2px;
  -webkit-animation-delay: -0.14s;
          animation-delay: -0.14s;
}
.clr .dot:nth-child(3) {
  background-color: #ff0900;
  box-shadow: #ff0900 0px 0px 50px 2px;
  -webkit-animation-delay: -0.21s;
          animation-delay: -0.21s;
}
.clr .dot:nth-child(4) {
  background-color: #ff0c00;
  box-shadow: #ff0c00 0px 0px 50px 2px;
  -webkit-animation-delay: -0.28s;
          animation-delay: -0.28s;
}
.clr .dot:nth-child(5) {
  background-color: #ff0f00;
  box-shadow: #ff0f00 0px 0px 50px 2px;
  -webkit-animation-delay: -0.35s;
          animation-delay: -0.35s;
}
.clr .dot:nth-child(6) {
  background-color: #ff1200;
  box-shadow: #ff1200 0px 0px 50px 2px;
  -webkit-animation-delay: -0.42s;
          animation-delay: -0.42s;
}
.clr .dot:nth-child(7) {
  background-color: #ff1500;
  box-shadow: #ff1500 0px 0px 50px 2px;
  -webkit-animation-delay: -0.49s;
          animation-delay: -0.49s;
}
.clr .dot:nth-child(8) {
  background-color: #ff1800;
  box-shadow: #ff1800 0px 0px 50px 2px;
  -webkit-animation-delay: -0.56s;
          animation-delay: -0.56s;
}
.clr .dot:nth-child(9) {
  background-color: #ff1b00;
  box-shadow: #ff1b00 0px 0px 50px 2px;
  -webkit-animation-delay: -0.63s;
          animation-delay: -0.63s;
}
.clr .dot:nth-child(10) {
  background-color: #ff1e00;
  box-shadow: #ff1e00 0px 0px 50px 2px;
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.clr .dot:nth-child(11) {
  background-color: #ff2100;
  box-shadow: #ff2100 0px 0px 50px 2px;
  -webkit-animation-delay: -0.77s;
          animation-delay: -0.77s;
}
.clr .dot:nth-child(12) {
  background-color: #ff2400;
  box-shadow: #ff2400 0px 0px 50px 2px;
  -webkit-animation-delay: -0.84s;
          animation-delay: -0.84s;
}
.clr .dot:nth-child(13) {
  background-color: #ff2700;
  box-shadow: #ff2700 0px 0px 50px 2px;
  -webkit-animation-delay: -0.91s;
          animation-delay: -0.91s;
}
.clr .dot:nth-child(14) {
  background-color: #ff2a00;
  box-shadow: #ff2a00 0px 0px 50px 2px;
  -webkit-animation-delay: -0.98s;
          animation-delay: -0.98s;
}
.clr .dot:nth-child(15) {
  background-color: #ff2d00;
  box-shadow: #ff2d00 0px 0px 50px 2px;
  -webkit-animation-delay: -1.05s;
          animation-delay: -1.05s;
}
.clr .dot:nth-child(16) {
  background-color: #ff3000;
  box-shadow: #ff3000 0px 0px 50px 2px;
  -webkit-animation-delay: -1.12s;
          animation-delay: -1.12s;
}
.clr .dot:nth-child(17) {
  background-color: #ff3300;
  box-shadow: #ff3300 0px 0px 50px 2px;
  -webkit-animation-delay: -1.19s;
          animation-delay: -1.19s;
}
.clr .dot:nth-child(18) {
  background-color: #ff3600;
  box-shadow: #ff3600 0px 0px 50px 2px;
  -webkit-animation-delay: -1.26s;
          animation-delay: -1.26s;
}
.clr .dot:nth-child(19) {
  background-color: #ff3900;
  box-shadow: #ff3900 0px 0px 50px 2px;
  -webkit-animation-delay: -1.33s;
          animation-delay: -1.33s;
}
.clr .dot:nth-child(20) {
  background-color: #ff3c00;
  box-shadow: #ff3c00 0px 0px 50px 2px;
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
}
.clr .dot:nth-child(21) {
  background-color: #ff3f00;
  box-shadow: #ff3f00 0px 0px 50px 2px;
  -webkit-animation-delay: -1.47s;
          animation-delay: -1.47s;
}
.clr .dot:nth-child(22) {
  background-color: #ff4300;
  box-shadow: #ff4300 0px 0px 50px 2px;
  -webkit-animation-delay: -1.54s;
          animation-delay: -1.54s;
}
.clr .dot:nth-child(23) {
  background-color: #ff4600;
  box-shadow: #ff4600 0px 0px 50px 2px;
  -webkit-animation-delay: -1.61s;
          animation-delay: -1.61s;
}
.clr .dot:nth-child(24) {
  background-color: #ff4900;
  box-shadow: #ff4900 0px 0px 50px 2px;
  -webkit-animation-delay: -1.68s;
          animation-delay: -1.68s;
}
.clr .dot:nth-child(25) {
  background-color: #ff4c00;
  box-shadow: #ff4c00 0px 0px 50px 2px;
  -webkit-animation-delay: -1.75s;
          animation-delay: -1.75s;
}
.clr .dot:nth-child(26) {
  background-color: #ff4f00;
  box-shadow: #ff4f00 0px 0px 50px 2px;
  -webkit-animation-delay: -1.82s;
          animation-delay: -1.82s;
}
.clr .dot:nth-child(27) {
  background-color: #ff5200;
  box-shadow: #ff5200 0px 0px 50px 2px;
  -webkit-animation-delay: -1.89s;
          animation-delay: -1.89s;
}
.clr .dot:nth-child(28) {
  background-color: #ff5500;
  box-shadow: #ff5500 0px 0px 50px 2px;
  -webkit-animation-delay: -1.96s;
          animation-delay: -1.96s;
}
.clr .dot:nth-child(29) {
  background-color: #ff5800;
  box-shadow: #ff5800 0px 0px 50px 2px;
  -webkit-animation-delay: -2.03s;
          animation-delay: -2.03s;
}
.clr .dot:nth-child(30) {
  background-color: #ff5b00;
  box-shadow: #ff5b00 0px 0px 50px 2px;
  -webkit-animation-delay: -2.1s;
          animation-delay: -2.1s;
}
.clr .dot:nth-child(31) {
  background-color: #ff5e00;
  box-shadow: #ff5e00 0px 0px 50px 2px;
  -webkit-animation-delay: -2.17s;
          animation-delay: -2.17s;
}
.clr .dot:nth-child(32) {
  background-color: #ff6100;
  box-shadow: #ff6100 0px 0px 50px 2px;
  -webkit-animation-delay: -2.24s;
          animation-delay: -2.24s;
}
.clr .dot:nth-child(33) {
  background-color: #ff6400;
  box-shadow: #ff6400 0px 0px 50px 2px;
  -webkit-animation-delay: -2.31s;
          animation-delay: -2.31s;
}
.clr .dot:nth-child(34) {
  background-color: #ff6700;
  box-shadow: #ff6700 0px 0px 50px 2px;
  -webkit-animation-delay: -2.38s;
          animation-delay: -2.38s;
}
.clr .dot:nth-child(35) {
  background-color: #ff6a00;
  box-shadow: #ff6a00 0px 0px 50px 2px;
  -webkit-animation-delay: -2.45s;
          animation-delay: -2.45s;
}
.clr .dot:nth-child(36) {
  background-color: #ff6d00;
  box-shadow: #ff6d00 0px 0px 50px 2px;
  -webkit-animation-delay: -2.52s;
          animation-delay: -2.52s;
}
.clr .dot:nth-child(37) {
  background-color: #ff7000;
  box-shadow: #ff7000 0px 0px 50px 2px;
  -webkit-animation-delay: -2.59s;
          animation-delay: -2.59s;
}
.clr .dot:nth-child(38) {
  background-color: #ff7300;
  box-shadow: #ff7300 0px 0px 50px 2px;
  -webkit-animation-delay: -2.66s;
          animation-delay: -2.66s;
}
.clr .dot:nth-child(39) {
  background-color: #ff7600;
  box-shadow: #ff7600 0px 0px 50px 2px;
  -webkit-animation-delay: -2.73s;
          animation-delay: -2.73s;
}
.clr .dot:nth-child(40) {
  background-color: #ff7900;
  box-shadow: #ff7900 0px 0px 50px 2px;
  -webkit-animation-delay: -2.8s;
          animation-delay: -2.8s;
}
.clr .dot:nth-child(41) {
  background-color: #ff7c00;
  box-shadow: #ff7c00 0px 0px 50px 2px;
  -webkit-animation-delay: -2.87s;
          animation-delay: -2.87s;
}
.clr .dot:nth-child(42) {
  background-color: #ff7f00;
  box-shadow: #ff7f00 0px 0px 50px 2px;
  -webkit-animation-delay: -2.94s;
          animation-delay: -2.94s;
}
.clr .dot:nth-child(43) {
  background-color: #ff8200;
  box-shadow: #ff8200 0px 0px 50px 2px;
  -webkit-animation-delay: -3.01s;
          animation-delay: -3.01s;
}
.clr .dot:nth-child(44) {
  background-color: #ff8500;
  box-shadow: #ff8500 0px 0px 50px 2px;
  -webkit-animation-delay: -3.08s;
          animation-delay: -3.08s;
}
.clr .dot:nth-child(45) {
  background-color: #ff8800;
  box-shadow: #ff8800 0px 0px 50px 2px;
  -webkit-animation-delay: -3.15s;
          animation-delay: -3.15s;
}
.clr .dot:nth-child(46) {
  background-color: #ff8b00;
  box-shadow: #ff8b00 0px 0px 50px 2px;
  -webkit-animation-delay: -3.22s;
          animation-delay: -3.22s;
}
.clr .dot:nth-child(47) {
  background-color: #ff8e00;
  box-shadow: #ff8e00 0px 0px 50px 2px;
  -webkit-animation-delay: -3.29s;
          animation-delay: -3.29s;
}
.clr .dot:nth-child(48) {
  background-color: #ff9100;
  box-shadow: #ff9100 0px 0px 50px 2px;
  -webkit-animation-delay: -3.36s;
          animation-delay: -3.36s;
}
.clr .dot:nth-child(49) {
  background-color: #ff9400;
  box-shadow: #ff9400 0px 0px 50px 2px;
  -webkit-animation-delay: -3.43s;
          animation-delay: -3.43s;
}
.clr .dot:nth-child(50) {
  background-color: #ff9700;
  box-shadow: #ff9700 0px 0px 50px 2px;
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
}
.clr .dot:nth-child(51) {
  background-color: #ff9a00;
  box-shadow: #ff9a00 0px 0px 50px 2px;
  -webkit-animation-delay: -3.57s;
          animation-delay: -3.57s;
}
.clr .dot:nth-child(52) {
  background-color: #ff9d00;
  box-shadow: #ff9d00 0px 0px 50px 2px;
  -webkit-animation-delay: -3.64s;
          animation-delay: -3.64s;
}
.clr .dot:nth-child(53) {
  background-color: #ffa000;
  box-shadow: #ffa000 0px 0px 50px 2px;
  -webkit-animation-delay: -3.71s;
          animation-delay: -3.71s;
}
.clr .dot:nth-child(54) {
  background-color: #ffa300;
  box-shadow: #ffa300 0px 0px 50px 2px;
  -webkit-animation-delay: -3.78s;
          animation-delay: -3.78s;
}
.clr .dot:nth-child(55) {
  background-color: #ffa600;
  box-shadow: #ffa600 0px 0px 50px 2px;
  -webkit-animation-delay: -3.85s;
          animation-delay: -3.85s;
}
.clr .dot:nth-child(56) {
  background-color: #ffa900;
  box-shadow: #ffa900 0px 0px 50px 2px;
  -webkit-animation-delay: -3.92s;
          animation-delay: -3.92s;
}
.clr .dot:nth-child(57) {
  background-color: #ffac00;
  box-shadow: #ffac00 0px 0px 50px 2px;
  -webkit-animation-delay: -3.99s;
          animation-delay: -3.99s;
}
.clr .dot:nth-child(58) {
  background-color: #ffaf00;
  box-shadow: #ffaf00 0px 0px 50px 2px;
  -webkit-animation-delay: -4.06s;
          animation-delay: -4.06s;
}
.clr .dot:nth-child(59) {
  background-color: #ffb200;
  box-shadow: #ffb200 0px 0px 50px 2px;
  -webkit-animation-delay: -4.13s;
          animation-delay: -4.13s;
}
.clr .dot:nth-child(60) {
  background-color: #ffb500;
  box-shadow: #ffb500 0px 0px 50px 2px;
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}
.clr .dot:nth-child(61) {
  background-color: #ffb800;
  box-shadow: #ffb800 0px 0px 50px 2px;
  -webkit-animation-delay: -4.27s;
          animation-delay: -4.27s;
}
.clr .dot:nth-child(62) {
  background-color: #ffbb00;
  box-shadow: #ffbb00 0px 0px 50px 2px;
  -webkit-animation-delay: -4.34s;
          animation-delay: -4.34s;
}
.clr .dot:nth-child(63) {
  background-color: #ffbe00;
  box-shadow: #ffbe00 0px 0px 50px 2px;
  -webkit-animation-delay: -4.41s;
          animation-delay: -4.41s;
}
.clr .dot:nth-child(64) {
  background-color: #ffc200;
  box-shadow: #ffc200 0px 0px 50px 2px;
  -webkit-animation-delay: -4.48s;
          animation-delay: -4.48s;
}
.clr .dot:nth-child(65) {
  background-color: #ffc500;
  box-shadow: #ffc500 0px 0px 50px 2px;
  -webkit-animation-delay: -4.55s;
          animation-delay: -4.55s;
}
.clr .dot:nth-child(66) {
  background-color: #ffc800;
  box-shadow: #ffc800 0px 0px 50px 2px;
  -webkit-animation-delay: -4.62s;
          animation-delay: -4.62s;
}
.clr .dot:nth-child(67) {
  background-color: #ffcb00;
  box-shadow: #ffcb00 0px 0px 50px 2px;
  -webkit-animation-delay: -4.69s;
          animation-delay: -4.69s;
}
.clr .dot:nth-child(68) {
  background-color: #ffce00;
  box-shadow: #ffce00 0px 0px 50px 2px;
  -webkit-animation-delay: -4.76s;
          animation-delay: -4.76s;
}
.clr .dot:nth-child(69) {
  background-color: #ffd100;
  box-shadow: #ffd100 0px 0px 50px 2px;
  -webkit-animation-delay: -4.83s;
          animation-delay: -4.83s;
}
.clr .dot:nth-child(70) {
  background-color: #ffd400;
  box-shadow: #ffd400 0px 0px 50px 2px;
  -webkit-animation-delay: -4.9s;
          animation-delay: -4.9s;
}
.clr .dot:nth-child(71) {
  background-color: gold;
  box-shadow: gold 0px 0px 50px 2px;
  -webkit-animation-delay: -4.97s;
          animation-delay: -4.97s;
}
.clr .dot:nth-child(72) {
  background-color: #ffda00;
  box-shadow: #ffda00 0px 0px 50px 2px;
  -webkit-animation-delay: -5.04s;
          animation-delay: -5.04s;
}
.clr .dot:nth-child(73) {
  background-color: #ffdd00;
  box-shadow: #ffdd00 0px 0px 50px 2px;
  -webkit-animation-delay: -5.11s;
          animation-delay: -5.11s;
}
.clr .dot:nth-child(74) {
  background-color: #ffe000;
  box-shadow: #ffe000 0px 0px 50px 2px;
  -webkit-animation-delay: -5.18s;
          animation-delay: -5.18s;
}
.clr .dot:nth-child(75) {
  background-color: #ffe300;
  box-shadow: #ffe300 0px 0px 50px 2px;
  -webkit-animation-delay: -5.25s;
          animation-delay: -5.25s;
}
.clr .dot:nth-child(76) {
  background-color: #ffe600;
  box-shadow: #ffe600 0px 0px 50px 2px;
  -webkit-animation-delay: -5.32s;
          animation-delay: -5.32s;
}
.clr .dot:nth-child(77) {
  background-color: #ffe900;
  box-shadow: #ffe900 0px 0px 50px 2px;
  -webkit-animation-delay: -5.39s;
          animation-delay: -5.39s;
}
.clr .dot:nth-child(78) {
  background-color: #ffec00;
  box-shadow: #ffec00 0px 0px 50px 2px;
  -webkit-animation-delay: -5.46s;
          animation-delay: -5.46s;
}
.clr .dot:nth-child(79) {
  background-color: #ffef00;
  box-shadow: #ffef00 0px 0px 50px 2px;
  -webkit-animation-delay: -5.53s;
          animation-delay: -5.53s;
}
.clr .dot:nth-child(80) {
  background-color: #fff200;
  box-shadow: #fff200 0px 0px 50px 2px;
  -webkit-animation-delay: -5.6s;
          animation-delay: -5.6s;
}
.clr .dot:nth-child(81) {
  background-color: #fff500;
  box-shadow: #fff500 0px 0px 50px 2px;
  -webkit-animation-delay: -5.67s;
          animation-delay: -5.67s;
}
.clr .dot:nth-child(82) {
  background-color: #fff800;
  box-shadow: #fff800 0px 0px 50px 2px;
  -webkit-animation-delay: -5.74s;
          animation-delay: -5.74s;
}
.clr .dot:nth-child(83) {
  background-color: #fffb00;
  box-shadow: #fffb00 0px 0px 50px 2px;
  -webkit-animation-delay: -5.81s;
          animation-delay: -5.81s;
}
.clr .dot:nth-child(84) {
  background-color: #fffe00;
  box-shadow: #fffe00 0px 0px 50px 2px;
  -webkit-animation-delay: -5.88s;
          animation-delay: -5.88s;
}
.clr .dot:nth-child(85) {
  background-color: #fdff00;
  box-shadow: #fdff00 0px 0px 50px 2px;
  -webkit-animation-delay: -5.95s;
          animation-delay: -5.95s;
}
.clr .dot:nth-child(86) {
  background-color: #faff00;
  box-shadow: #faff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.02s;
          animation-delay: -6.02s;
}
.clr .dot:nth-child(87) {
  background-color: #f7ff00;
  box-shadow: #f7ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.09s;
          animation-delay: -6.09s;
}
.clr .dot:nth-child(88) {
  background-color: #f4ff00;
  box-shadow: #f4ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.16s;
          animation-delay: -6.16s;
}
.clr .dot:nth-child(89) {
  background-color: #f1ff00;
  box-shadow: #f1ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.23s;
          animation-delay: -6.23s;
}
.clr .dot:nth-child(90) {
  background-color: #eeff00;
  box-shadow: #eeff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.3s;
          animation-delay: -6.3s;
}
.clr .dot:nth-child(91) {
  background-color: #ebff00;
  box-shadow: #ebff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.37s;
          animation-delay: -6.37s;
}
.clr .dot:nth-child(92) {
  background-color: #e8ff00;
  box-shadow: #e8ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.44s;
          animation-delay: -6.44s;
}
.clr .dot:nth-child(93) {
  background-color: #e5ff00;
  box-shadow: #e5ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.51s;
          animation-delay: -6.51s;
}
.clr .dot:nth-child(94) {
  background-color: #e2ff00;
  box-shadow: #e2ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.58s;
          animation-delay: -6.58s;
}
.clr .dot:nth-child(95) {
  background-color: #dfff00;
  box-shadow: #dfff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.65s;
          animation-delay: -6.65s;
}
.clr .dot:nth-child(96) {
  background-color: #dcff00;
  box-shadow: #dcff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.72s;
          animation-delay: -6.72s;
}
.clr .dot:nth-child(97) {
  background-color: #d9ff00;
  box-shadow: #d9ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.79s;
          animation-delay: -6.79s;
}
.clr .dot:nth-child(98) {
  background-color: #d6ff00;
  box-shadow: #d6ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.86s;
          animation-delay: -6.86s;
}
.clr .dot:nth-child(99) {
  background-color: #d3ff00;
  box-shadow: #d3ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -6.93s;
          animation-delay: -6.93s;
}
.clr .dot:nth-child(100) {
  background-color: #d0ff00;
  box-shadow: #d0ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
}
.clr .dot:nth-child(101) {
  background-color: #cdff00;
  box-shadow: #cdff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.07s;
          animation-delay: -7.07s;
}
.clr .dot:nth-child(102) {
  background-color: #caff00;
  box-shadow: #caff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.14s;
          animation-delay: -7.14s;
}
.clr .dot:nth-child(103) {
  background-color: #c7ff00;
  box-shadow: #c7ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.21s;
          animation-delay: -7.21s;
}
.clr .dot:nth-child(104) {
  background-color: #c4ff00;
  box-shadow: #c4ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.28s;
          animation-delay: -7.28s;
}
.clr .dot:nth-child(105) {
  background-color: #c1ff00;
  box-shadow: #c1ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.35s;
          animation-delay: -7.35s;
}
.clr .dot:nth-child(106) {
  background-color: #bdff00;
  box-shadow: #bdff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.42s;
          animation-delay: -7.42s;
}
.clr .dot:nth-child(107) {
  background-color: #baff00;
  box-shadow: #baff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.49s;
          animation-delay: -7.49s;
}
.clr .dot:nth-child(108) {
  background-color: #b7ff00;
  box-shadow: #b7ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.56s;
          animation-delay: -7.56s;
}
.clr .dot:nth-child(109) {
  background-color: #b4ff00;
  box-shadow: #b4ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.63s;
          animation-delay: -7.63s;
}
.clr .dot:nth-child(110) {
  background-color: #b1ff00;
  box-shadow: #b1ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.7s;
          animation-delay: -7.7s;
}
.clr .dot:nth-child(111) {
  background-color: #aeff00;
  box-shadow: #aeff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.77s;
          animation-delay: -7.77s;
}
.clr .dot:nth-child(112) {
  background-color: #abff00;
  box-shadow: #abff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.84s;
          animation-delay: -7.84s;
}
.clr .dot:nth-child(113) {
  background-color: #a8ff00;
  box-shadow: #a8ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.91s;
          animation-delay: -7.91s;
}
.clr .dot:nth-child(114) {
  background-color: #a5ff00;
  box-shadow: #a5ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -7.98s;
          animation-delay: -7.98s;
}
.clr .dot:nth-child(115) {
  background-color: #a2ff00;
  box-shadow: #a2ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.05s;
          animation-delay: -8.05s;
}
.clr .dot:nth-child(116) {
  background-color: #9fff00;
  box-shadow: #9fff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.12s;
          animation-delay: -8.12s;
}
.clr .dot:nth-child(117) {
  background-color: #9cff00;
  box-shadow: #9cff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.19s;
          animation-delay: -8.19s;
}
.clr .dot:nth-child(118) {
  background-color: #99ff00;
  box-shadow: #99ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.26s;
          animation-delay: -8.26s;
}
.clr .dot:nth-child(119) {
  background-color: #96ff00;
  box-shadow: #96ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.33s;
          animation-delay: -8.33s;
}
.clr .dot:nth-child(120) {
  background-color: #93ff00;
  box-shadow: #93ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}
.clr .dot:nth-child(121) {
  background-color: #90ff00;
  box-shadow: #90ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.47s;
          animation-delay: -8.47s;
}
.clr .dot:nth-child(122) {
  background-color: #8dff00;
  box-shadow: #8dff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.54s;
          animation-delay: -8.54s;
}
.clr .dot:nth-child(123) {
  background-color: #8aff00;
  box-shadow: #8aff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.61s;
          animation-delay: -8.61s;
}
.clr .dot:nth-child(124) {
  background-color: #87ff00;
  box-shadow: #87ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.68s;
          animation-delay: -8.68s;
}
.clr .dot:nth-child(125) {
  background-color: #84ff00;
  box-shadow: #84ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.75s;
          animation-delay: -8.75s;
}
.clr .dot:nth-child(126) {
  background-color: #81ff00;
  box-shadow: #81ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.82s;
          animation-delay: -8.82s;
}
.clr .dot:nth-child(127) {
  background-color: #7eff00;
  box-shadow: #7eff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.89s;
          animation-delay: -8.89s;
}
.clr .dot:nth-child(128) {
  background-color: #7bff00;
  box-shadow: #7bff00 0px 0px 50px 2px;
  -webkit-animation-delay: -8.96s;
          animation-delay: -8.96s;
}
.clr .dot:nth-child(129) {
  background-color: #78ff00;
  box-shadow: #78ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.03s;
          animation-delay: -9.03s;
}
.clr .dot:nth-child(130) {
  background-color: #75ff00;
  box-shadow: #75ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.1s;
          animation-delay: -9.1s;
}
.clr .dot:nth-child(131) {
  background-color: #72ff00;
  box-shadow: #72ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.17s;
          animation-delay: -9.17s;
}
.clr .dot:nth-child(132) {
  background-color: #6fff00;
  box-shadow: #6fff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.24s;
          animation-delay: -9.24s;
}
.clr .dot:nth-child(133) {
  background-color: #6cff00;
  box-shadow: #6cff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.31s;
          animation-delay: -9.31s;
}
.clr .dot:nth-child(134) {
  background-color: #69ff00;
  box-shadow: #69ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.38s;
          animation-delay: -9.38s;
}
.clr .dot:nth-child(135) {
  background-color: #66ff00;
  box-shadow: #66ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.45s;
          animation-delay: -9.45s;
}
.clr .dot:nth-child(136) {
  background-color: #63ff00;
  box-shadow: #63ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.52s;
          animation-delay: -9.52s;
}
.clr .dot:nth-child(137) {
  background-color: #60ff00;
  box-shadow: #60ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.59s;
          animation-delay: -9.59s;
}
.clr .dot:nth-child(138) {
  background-color: #5dff00;
  box-shadow: #5dff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.66s;
          animation-delay: -9.66s;
}
.clr .dot:nth-child(139) {
  background-color: #5aff00;
  box-shadow: #5aff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.73s;
          animation-delay: -9.73s;
}
.clr .dot:nth-child(140) {
  background-color: #57ff00;
  box-shadow: #57ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.8s;
          animation-delay: -9.8s;
}
.clr .dot:nth-child(141) {
  background-color: #54ff00;
  box-shadow: #54ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.87s;
          animation-delay: -9.87s;
}
.clr .dot:nth-child(142) {
  background-color: #51ff00;
  box-shadow: #51ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -9.94s;
          animation-delay: -9.94s;
}
.clr .dot:nth-child(143) {
  background-color: #4eff00;
  box-shadow: #4eff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.01s;
          animation-delay: -10.01s;
}
.clr .dot:nth-child(144) {
  background-color: #4bff00;
  box-shadow: #4bff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.08s;
          animation-delay: -10.08s;
}
.clr .dot:nth-child(145) {
  background-color: #48ff00;
  box-shadow: #48ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.15s;
          animation-delay: -10.15s;
}
.clr .dot:nth-child(146) {
  background-color: #45ff00;
  box-shadow: #45ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.22s;
          animation-delay: -10.22s;
}
.clr .dot:nth-child(147) {
  background-color: #42ff00;
  box-shadow: #42ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.29s;
          animation-delay: -10.29s;
}
.clr .dot:nth-child(148) {
  background-color: #3eff00;
  box-shadow: #3eff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.36s;
          animation-delay: -10.36s;
}
.clr .dot:nth-child(149) {
  background-color: #3bff00;
  box-shadow: #3bff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.43s;
          animation-delay: -10.43s;
}
.clr .dot:nth-child(150) {
  background-color: #38ff00;
  box-shadow: #38ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.5s;
          animation-delay: -10.5s;
}
.clr .dot:nth-child(151) {
  background-color: #35ff00;
  box-shadow: #35ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.57s;
          animation-delay: -10.57s;
}
.clr .dot:nth-child(152) {
  background-color: #32ff00;
  box-shadow: #32ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.64s;
          animation-delay: -10.64s;
}
.clr .dot:nth-child(153) {
  background-color: #2fff00;
  box-shadow: #2fff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.71s;
          animation-delay: -10.71s;
}
.clr .dot:nth-child(154) {
  background-color: #2cff00;
  box-shadow: #2cff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.78s;
          animation-delay: -10.78s;
}
.clr .dot:nth-child(155) {
  background-color: #29ff00;
  box-shadow: #29ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.85s;
          animation-delay: -10.85s;
}
.clr .dot:nth-child(156) {
  background-color: #26ff00;
  box-shadow: #26ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.92s;
          animation-delay: -10.92s;
}
.clr .dot:nth-child(157) {
  background-color: #23ff00;
  box-shadow: #23ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -10.99s;
          animation-delay: -10.99s;
}
.clr .dot:nth-child(158) {
  background-color: #20ff00;
  box-shadow: #20ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.06s;
          animation-delay: -11.06s;
}
.clr .dot:nth-child(159) {
  background-color: #1dff00;
  box-shadow: #1dff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.13s;
          animation-delay: -11.13s;
}
.clr .dot:nth-child(160) {
  background-color: #1aff00;
  box-shadow: #1aff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.2s;
          animation-delay: -11.2s;
}
.clr .dot:nth-child(161) {
  background-color: #17ff00;
  box-shadow: #17ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.27s;
          animation-delay: -11.27s;
}
.clr .dot:nth-child(162) {
  background-color: #14ff00;
  box-shadow: #14ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.34s;
          animation-delay: -11.34s;
}
.clr .dot:nth-child(163) {
  background-color: #11ff00;
  box-shadow: #11ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.41s;
          animation-delay: -11.41s;
}
.clr .dot:nth-child(164) {
  background-color: #0eff00;
  box-shadow: #0eff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.48s;
          animation-delay: -11.48s;
}
.clr .dot:nth-child(165) {
  background-color: #0bff00;
  box-shadow: #0bff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.55s;
          animation-delay: -11.55s;
}
.clr .dot:nth-child(166) {
  background-color: #08ff00;
  box-shadow: #08ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.62s;
          animation-delay: -11.62s;
}
.clr .dot:nth-child(167) {
  background-color: #05ff00;
  box-shadow: #05ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.69s;
          animation-delay: -11.69s;
}
.clr .dot:nth-child(168) {
  background-color: #02ff00;
  box-shadow: #02ff00 0px 0px 50px 2px;
  -webkit-animation-delay: -11.76s;
          animation-delay: -11.76s;
}
.clr .dot:nth-child(169) {
  background-color: #00ff01;
  box-shadow: #00ff01 0px 0px 50px 2px;
  -webkit-animation-delay: -11.83s;
          animation-delay: -11.83s;
}
.clr .dot:nth-child(170) {
  background-color: #00ff04;
  box-shadow: #00ff04 0px 0px 50px 2px;
  -webkit-animation-delay: -11.9s;
          animation-delay: -11.9s;
}
.clr .dot:nth-child(171) {
  background-color: #00ff07;
  box-shadow: #00ff07 0px 0px 50px 2px;
  -webkit-animation-delay: -11.97s;
          animation-delay: -11.97s;
}
.clr .dot:nth-child(172) {
  background-color: #00ff0a;
  box-shadow: #00ff0a 0px 0px 50px 2px;
  -webkit-animation-delay: -12.04s;
          animation-delay: -12.04s;
}
.clr .dot:nth-child(173) {
  background-color: #00ff0d;
  box-shadow: #00ff0d 0px 0px 50px 2px;
  -webkit-animation-delay: -12.11s;
          animation-delay: -12.11s;
}
.clr .dot:nth-child(174) {
  background-color: #00ff10;
  box-shadow: #00ff10 0px 0px 50px 2px;
  -webkit-animation-delay: -12.18s;
          animation-delay: -12.18s;
}
.clr .dot:nth-child(175) {
  background-color: #00ff13;
  box-shadow: #00ff13 0px 0px 50px 2px;
  -webkit-animation-delay: -12.25s;
          animation-delay: -12.25s;
}
.clr .dot:nth-child(176) {
  background-color: #00ff16;
  box-shadow: #00ff16 0px 0px 50px 2px;
  -webkit-animation-delay: -12.32s;
          animation-delay: -12.32s;
}
.clr .dot:nth-child(177) {
  background-color: #00ff19;
  box-shadow: #00ff19 0px 0px 50px 2px;
  -webkit-animation-delay: -12.39s;
          animation-delay: -12.39s;
}
.clr .dot:nth-child(178) {
  background-color: #00ff1c;
  box-shadow: #00ff1c 0px 0px 50px 2px;
  -webkit-animation-delay: -12.46s;
          animation-delay: -12.46s;
}
.clr .dot:nth-child(179) {
  background-color: #00ff1f;
  box-shadow: #00ff1f 0px 0px 50px 2px;
  -webkit-animation-delay: -12.53s;
          animation-delay: -12.53s;
}
.clr .dot:nth-child(180) {
  background-color: #00ff22;
  box-shadow: #00ff22 0px 0px 50px 2px;
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}
.clr .dot:nth-child(181) {
  background-color: #00ff25;
  box-shadow: #00ff25 0px 0px 50px 2px;
  -webkit-animation-delay: -12.67s;
          animation-delay: -12.67s;
}
.clr .dot:nth-child(182) {
  background-color: #00ff28;
  box-shadow: #00ff28 0px 0px 50px 2px;
  -webkit-animation-delay: -12.74s;
          animation-delay: -12.74s;
}
.clr .dot:nth-child(183) {
  background-color: #00ff2b;
  box-shadow: #00ff2b 0px 0px 50px 2px;
  -webkit-animation-delay: -12.81s;
          animation-delay: -12.81s;
}
.clr .dot:nth-child(184) {
  background-color: #00ff2e;
  box-shadow: #00ff2e 0px 0px 50px 2px;
  -webkit-animation-delay: -12.88s;
          animation-delay: -12.88s;
}
.clr .dot:nth-child(185) {
  background-color: #00ff31;
  box-shadow: #00ff31 0px 0px 50px 2px;
  -webkit-animation-delay: -12.95s;
          animation-delay: -12.95s;
}
.clr .dot:nth-child(186) {
  background-color: #00ff34;
  box-shadow: #00ff34 0px 0px 50px 2px;
  -webkit-animation-delay: -13.02s;
          animation-delay: -13.02s;
}
.clr .dot:nth-child(187) {
  background-color: #00ff37;
  box-shadow: #00ff37 0px 0px 50px 2px;
  -webkit-animation-delay: -13.09s;
          animation-delay: -13.09s;
}
.clr .dot:nth-child(188) {
  background-color: #00ff3a;
  box-shadow: #00ff3a 0px 0px 50px 2px;
  -webkit-animation-delay: -13.16s;
          animation-delay: -13.16s;
}
.clr .dot:nth-child(189) {
  background-color: #00ff3d;
  box-shadow: #00ff3d 0px 0px 50px 2px;
  -webkit-animation-delay: -13.23s;
          animation-delay: -13.23s;
}
.clr .dot:nth-child(190) {
  background-color: #00ff41;
  box-shadow: #00ff41 0px 0px 50px 2px;
  -webkit-animation-delay: -13.3s;
          animation-delay: -13.3s;
}
.clr .dot:nth-child(191) {
  background-color: #00ff44;
  box-shadow: #00ff44 0px 0px 50px 2px;
  -webkit-animation-delay: -13.37s;
          animation-delay: -13.37s;
}
.clr .dot:nth-child(192) {
  background-color: #00ff47;
  box-shadow: #00ff47 0px 0px 50px 2px;
  -webkit-animation-delay: -13.44s;
          animation-delay: -13.44s;
}
.clr .dot:nth-child(193) {
  background-color: #00ff4a;
  box-shadow: #00ff4a 0px 0px 50px 2px;
  -webkit-animation-delay: -13.51s;
          animation-delay: -13.51s;
}
.clr .dot:nth-child(194) {
  background-color: #00ff4d;
  box-shadow: #00ff4d 0px 0px 50px 2px;
  -webkit-animation-delay: -13.58s;
          animation-delay: -13.58s;
}
.clr .dot:nth-child(195) {
  background-color: #00ff50;
  box-shadow: #00ff50 0px 0px 50px 2px;
  -webkit-animation-delay: -13.65s;
          animation-delay: -13.65s;
}
.clr .dot:nth-child(196) {
  background-color: #00ff53;
  box-shadow: #00ff53 0px 0px 50px 2px;
  -webkit-animation-delay: -13.72s;
          animation-delay: -13.72s;
}
.clr .dot:nth-child(197) {
  background-color: #00ff56;
  box-shadow: #00ff56 0px 0px 50px 2px;
  -webkit-animation-delay: -13.79s;
          animation-delay: -13.79s;
}
.clr .dot:nth-child(198) {
  background-color: #00ff59;
  box-shadow: #00ff59 0px 0px 50px 2px;
  -webkit-animation-delay: -13.86s;
          animation-delay: -13.86s;
}
.clr .dot:nth-child(199) {
  background-color: #00ff5c;
  box-shadow: #00ff5c 0px 0px 50px 2px;
  -webkit-animation-delay: -13.93s;
          animation-delay: -13.93s;
}
.clr .dot:nth-child(200) {
  background-color: #00ff5f;
  box-shadow: #00ff5f 0px 0px 50px 2px;
  -webkit-animation-delay: -14s;
          animation-delay: -14s;
}
.clr .dot:nth-child(201) {
  background-color: #00ff62;
  box-shadow: #00ff62 0px 0px 50px 2px;
  -webkit-animation-delay: -14.07s;
          animation-delay: -14.07s;
}
.clr .dot:nth-child(202) {
  background-color: #00ff65;
  box-shadow: #00ff65 0px 0px 50px 2px;
  -webkit-animation-delay: -14.14s;
          animation-delay: -14.14s;
}
.clr .dot:nth-child(203) {
  background-color: #00ff68;
  box-shadow: #00ff68 0px 0px 50px 2px;
  -webkit-animation-delay: -14.21s;
          animation-delay: -14.21s;
}
.clr .dot:nth-child(204) {
  background-color: #00ff6b;
  box-shadow: #00ff6b 0px 0px 50px 2px;
  -webkit-animation-delay: -14.28s;
          animation-delay: -14.28s;
}
.clr .dot:nth-child(205) {
  background-color: #00ff6e;
  box-shadow: #00ff6e 0px 0px 50px 2px;
  -webkit-animation-delay: -14.35s;
          animation-delay: -14.35s;
}
.clr .dot:nth-child(206) {
  background-color: #00ff71;
  box-shadow: #00ff71 0px 0px 50px 2px;
  -webkit-animation-delay: -14.42s;
          animation-delay: -14.42s;
}
.clr .dot:nth-child(207) {
  background-color: #00ff74;
  box-shadow: #00ff74 0px 0px 50px 2px;
  -webkit-animation-delay: -14.49s;
          animation-delay: -14.49s;
}
.clr .dot:nth-child(208) {
  background-color: #00ff77;
  box-shadow: #00ff77 0px 0px 50px 2px;
  -webkit-animation-delay: -14.56s;
          animation-delay: -14.56s;
}
.clr .dot:nth-child(209) {
  background-color: #00ff7a;
  box-shadow: #00ff7a 0px 0px 50px 2px;
  -webkit-animation-delay: -14.63s;
          animation-delay: -14.63s;
}
.clr .dot:nth-child(210) {
  background-color: #00ff7d;
  box-shadow: #00ff7d 0px 0px 50px 2px;
  -webkit-animation-delay: -14.7s;
          animation-delay: -14.7s;
}
.clr .dot:nth-child(211) {
  background-color: #00ff80;
  box-shadow: #00ff80 0px 0px 50px 2px;
  -webkit-animation-delay: -14.77s;
          animation-delay: -14.77s;
}
.clr .dot:nth-child(212) {
  background-color: #00ff83;
  box-shadow: #00ff83 0px 0px 50px 2px;
  -webkit-animation-delay: -14.84s;
          animation-delay: -14.84s;
}
.clr .dot:nth-child(213) {
  background-color: #00ff86;
  box-shadow: #00ff86 0px 0px 50px 2px;
  -webkit-animation-delay: -14.91s;
          animation-delay: -14.91s;
}
.clr .dot:nth-child(214) {
  background-color: #00ff89;
  box-shadow: #00ff89 0px 0px 50px 2px;
  -webkit-ani.........完整代码请登录后点击上方下载按钮下载查看