纯css实现彩虹桥运动动画效果
代码语言：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-animation-delay: -14.98s;
animation-delay: -14.98s;
}
.clr .dot:nth-child(215) {
background-color: #00ff8c;
box-shadow: #00ff8c 0px 0px 50px 2px;
-webkit-animation-delay: -15.05s;
animation-delay: -15.05s;
}
.clr .dot:nth-child(216) {
background-color: #00ff8f;
box-shadow: #00ff8f 0px 0px 50px 2px;
-webkit-animation-delay: -15.12s;
animation-delay: -15.12s;
}
.clr .dot:nth-child(217) {
background-color: #00ff92;
box-shadow: #00ff92 0px 0px 50px 2px;
-webkit-animation-delay: -15.19s;
animation-delay: -15.19s;
}
.clr .dot:nth-child(218) {
background-color: #00ff95;
box-shadow: #00ff95 0px 0px 50px 2px;
-webkit-animation-delay: -15.26s;
animation-delay: -15.26s;
}
.clr .dot:nth-child(219) {
background-color: #00ff98;
box-shadow: #00ff98 0px 0px 50px 2px;
-webkit-animation-delay: -15.33s;
animation-delay: -15.33s;
}
.clr .dot:nth-child(220) {
background-color: #00ff9b;
box-shadow: #00ff9b 0px 0px 50px 2px;
-webkit-animation-delay: -15.4s;
animation-delay: -15.4s;
}
.clr .dot:nth-child(221) {
background-color: #00ff9e;
box-shadow: #00ff9e 0px 0px 50px 2px;
-webkit-animation-delay: -15.47s;
animation-delay: -15.47s;
}
.clr .dot:nth-child(222) {
background-color: #00ffa1;
box-shadow: #00ffa1 0px 0px 50px 2px;
-webkit-animation-delay: -15.54s;
animation-delay: -15.54s;
}
.clr .dot:nth-child(223) {
background-color: #00ffa4;
box-shadow: #00ffa4 0px 0px 50px 2px;
-webkit-animation-delay: -15.61s;
animation-delay: -15.61s;
}
.clr .dot:nth-child(224) {
background-color: #00ffa7;
box-shadow: #00ffa7 0px 0px 50px 2px;
-webkit-animation-delay: -15.68s;
animation-delay: -15.68s;
}
.clr .dot:nth-child(225) {
background-color: #00ffaa;
box-shadow: #00ffaa 0px 0px 50px 2px;
-webkit-animation-delay: -15.75s;
animation-delay: -15.75s;
}
.clr .dot:nth-child(226) {
background-color: #00ffad;
box-shadow: #00ffad 0px 0px 50px 2px;
-webkit-animation-delay: -15.82s;
animation-delay: -15.82s;
}
.clr .dot:nth-child(227) {
background-color: #00ffb0;
box-shadow: #00ffb0 0px 0px 50px 2px;
-webkit-animation-delay: -15.89s;
animation-delay: -15.89s;
}
.clr .dot:nth-child(228) {
background-color: #00ffb3;
box-shadow: #00ffb3 0px 0px 50px 2px;
-webkit-animation-delay: -15.96s;
animation-delay: -15.96s;
}
.clr .dot:nth-child(229) {
background-color: #00ffb6;
box-shadow: #00ffb6 0px 0px 50px 2px;
-webkit-animation-delay: -16.03s;
animation-delay: -16.03s;
}
.clr .dot:nth-child(230) {
background-color: #00ffb9;
box-shadow: #00ffb9 0px 0px 50px 2px;
-webkit-animation-delay: -16.1s;
animation-delay: -16.1s;
}
.clr .dot:nth-child(231) {
background-color: #00ffbc;
box-shadow: #00ffbc 0px 0px 50px 2px;
-webkit-animation-delay: -16.17s;
animation-delay: -16.17s;
}
.clr .dot:nth-child(232) {
background-color: #00ffc0;
box-shadow: #00ffc0 0px 0px 50px 2px;
-webkit-animation-delay: -16.24s;
animation-delay: -16.24s;
}
.clr .dot:nth-child(233) {
background-color: #00ffc3;
box-shadow: #00ffc3 0px 0px 50px 2px;
-webkit-animation-delay: -16.31s;
animation-delay: -16.31s;
}
.clr .dot:nth-child(234) {
background-color: #00ffc6;
box-shadow: #00ffc6 0px 0px 50px 2px;
-webkit-animation-delay: -16.38s;
animation-delay: -16.38s;
}
.clr .dot:nth-child(235) {
background-color: #00ffc9;
box-shadow: #00ffc9 0px 0px 50px 2px;
-webkit-animation-delay: -16.45s;
animation-delay: -16.45s;
}
.clr .dot:nth-child(236) {
background-color: #00ffcc;
box-shadow: #00ffcc 0px 0px 50px 2px;
-webkit-animation-delay: -16.52s;
animation-delay: -16.52s;
}
.clr .dot:nth-child(237) {
background-color: #00ffcf;
box-shadow: #00ffcf 0px 0px 50px 2px;
-webkit-animation-delay: -16.59s;
animation-delay: -16.59s;
}
.clr .dot:nth-child(238) {
background-color: #00ffd2;
box-shadow: #00ffd2 0px 0px 50px 2px;
-webkit-animation-delay: -16.66s;
animation-delay: -16.66s;
}
.clr .dot:nth-child(239) {
background-color: #00ffd5;
box-shadow: #00ffd5 0px 0px 50px 2px;
-webkit-animation-delay: -16.73s;
animation-delay: -16.73s;
}
.clr .dot:nth-child(240) {
background-color: #00ffd8;
box-shadow: #00ffd8 0px 0px 50px 2px;
-webkit-animation-delay: -16.8s;
animation-delay: -16.8s;
}
.clr .dot:nth-child(241) {
background-color: #00ffdb;
box-shadow: #00ffdb 0px 0px 50px 2px;
-webkit-animation-delay: -16.87s;
animation-delay: -16.87s;
}
.clr .dot:nth-child(242) {
background-color: #00ffde;
box-shadow: #00ffde 0px 0px 50px 2px;
-webkit-animation-delay: -16.94s;
animation-delay: -16.94s;
}
.clr .dot:nth-child(243) {
background-color: #00ffe1;
box-shadow: #00ffe1 0px 0px 50px 2px;
-webkit-animation-delay: -17.01s;
animation-delay: -17.01s;
}
.clr .dot:nth-child(244) {
background-color: #00ffe4;
box-shadow: #00ffe4 0px 0px 50px 2px;
-webkit-animation-delay: -17.08s;
animation-delay: -17.08s;
}
.clr .dot:nth-child(245) {
background-color: #00ffe7;
box-shadow: #00ffe7 0px 0px 50px 2px;
-webkit-animation-delay: -17.15s;
animation-delay: -17.15s;
}
.clr .dot:nth-child(246) {
background-color: #00ffea;
box-shadow: #00ffea 0px 0px 50px 2px;
-webkit-animation-delay: -17.22s;
animation-delay: -17.22s;
}
.clr .dot:nth-child(247) {
background-color: #00ffed;
box-shadow: #00ffed 0px 0px 50px 2px;
-webkit-animation-delay: -17.29s;
animation-delay: -17.29s;
}
.clr .dot:nth-child(248) {
background-color: #00fff0;
box-shadow: #00fff0 0px 0px 50px 2px;
-webkit-animation-delay: -17.36s;
animation-delay: -17.36s;
}
.clr .dot:nth-child(249) {
background-color: #00fff3;
box-shadow: #00fff3 0px 0px 50px 2px;
-webkit-animation-delay: -17.43s;
animation-delay: -17.43s;
}
.clr .dot:nth-child(250) {
background-color: #00fff6;
box-shadow: #00fff6 0px 0px 50px 2px;
-webkit-animation-delay: -17.5s;
animation-delay: -17.5s;
}
.clr .dot:nth-child(251) {
background-color: #00fff9;
box-shadow: #00fff9 0px 0px 50px 2px;
-webkit-animation-delay: -17.57s;
animation-delay: -17.57s;
}
.clr .dot:nth-child(252) {
background-color: #00fffc;
box-shadow: #00fffc 0px 0px 50px 2px;
-webkit-animation-delay: -17.64s;
animation-delay: -17.64s;
}
.clr .dot:nth-child(253) {
background-color: cyan;
box-shadow: cyan 0px 0px 50px 2px;
-webkit-animation-delay: -17.71s;
animation-delay: -17.71s;
}
.clr .dot:nth-child(254) {
background-color: #00fcff;
box-shadow: #00fcff 0px 0px 50px 2px;
-webkit-animation-delay: -17.78s;
animation-delay: -17.78s;
}
.clr .dot:nth-child(255) {
background-color: #00f9ff;
box-shadow: #00f9ff 0px 0px 50px 2px;
-webkit-animation-delay: -17.85s;
animation-delay: -17.85s;
}
.clr .dot:nth-child(256) {
background-color: #00f6ff;
box-shadow: #00f6ff 0px 0px 50px 2px;
-webkit-animation-delay: -17.92s;
animation-delay: -17.92s;
}
.clr .dot:nth-child(257) {
background-color: #00f3ff;
box-shadow: #00f3ff 0px 0px 50px 2px;
-webkit-animation-delay: -17.99s;
animation-delay: -17.99s;
}
.clr .dot:nth-child(258) {
background-color: #00f0ff;
box-shadow: #00f0ff 0px 0px 50px 2px;
-webkit-animation-delay: -18.06s;
animation-delay: -18.06s;
}
.clr .dot:nth-child(259) {
background-color: #00edff;
box-shadow: #00edff 0px 0px 50px 2px;
-webkit-animation-delay: -18.13s;
animation-delay: -18.13s;
}
.clr .dot:nth-child(260) {
background-color: #00eaff;
box-shadow: #00eaff 0px 0px 50px 2px;
-webkit-animation-delay: -18.2s;
animation-delay: -18.2s;
}
.clr .dot:nth-child(261) {
background-color: #00e7ff;
box-shadow: #00e7ff 0px 0px 50px 2px;
-webkit-animation-delay: -18.27s;
animation-delay: -18.27s;
}
.clr .dot:nth-child(262) {
background-color: #00e4ff;
box-shadow: #00e4ff 0px 0px 50px 2px;
-webkit-animation-delay: -18.34s;
animation-delay: -18.34s;
}
.clr .dot:nth-child(263) {
background-color: #00e1ff;
box-shadow: #00e1ff 0px 0px 50px 2px;
-webkit-animation-delay: -18.41s;
animation-delay: -18.41s;
}
.clr .dot:nth-child(264) {
background-color: #00deff;
box-shadow: #00deff 0px 0px 50px 2px;
-webkit-animation-delay: -18.48s;
animation-delay: -18.48s;
}
.clr .dot:nth-child(265) {
background-color: #00dbff;
box-shadow: #00dbff 0px 0px 50px 2px;
-webkit-animation-delay: -18.55s;
animation-delay: -18.55s;
}
.clr .dot:nth-child(266) {
background-color: #00d8ff;
box-shadow: #00d8ff 0px 0px 50px 2px;
-webkit-animation-delay: -18.62s;
animation-delay: -18.62s;
}
.clr .dot:nth-child(267) {
background-color: #00d5ff;
box-shadow: #00d5ff 0px 0px 50px 2px;
-webkit-animation-delay: -18.69s;
animation-delay: -18.69s;
}
.clr .dot:nth-child(268) {
background-color: #00d2ff;
box-shadow: #00d2ff 0px 0px 50px 2px;
-webkit-animation-delay: -18.76s;
animation-delay: -18.76s;
}
.clr .dot:nth-child(269) {
background-color: #00cfff;
box-shadow: #00cfff 0px 0px 50px 2px;
-webkit-animation-delay: -18.83s;
animation-delay: -18.83s;
}
.clr .dot:nth-child(270) {
background-color: #00ccff;
box-shadow: #00ccff 0px 0px 50px 2px;
-webkit-animation-delay: -18.9s;
animation-delay: -18.9s;
}
.clr .dot:nth-child(271) {
background-color: #00c9ff;
box-shadow: #00c9ff 0px 0px 50px 2px;
-webkit-animation-delay: -18.97s;
animation-delay: -18.97s;
}
.clr .dot:nth-child(272) {
background-color: #00c6ff;
box-shadow: #00c6ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.04s;
animation-delay: -19.04s;
}
.clr .dot:nth-child(273) {
background-color: #00c3ff;
box-shadow: #00c3ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.11s;
animation-delay: -19.11s;
}
.clr .dot:nth-child(274) {
background-color: #00c0ff;
box-shadow: #00c0ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.18s;
animation-delay: -19.18s;
}
.clr .dot:nth-child(275) {
background-color: #00bcff;
box-shadow: #00bcff 0px 0px 50px 2px;
-webkit-animation-delay: -19.25s;
animation-delay: -19.25s;
}
.clr .dot:nth-child(276) {
background-color: #00b9ff;
box-shadow: #00b9ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.32s;
animation-delay: -19.32s;
}
.clr .dot:nth-child(277) {
background-color: #00b6ff;
box-shadow: #00b6ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.39s;
animation-delay: -19.39s;
}
.clr .dot:nth-child(278) {
background-color: #00b3ff;
box-shadow: #00b3ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.46s;
animation-delay: -19.46s;
}
.clr .dot:nth-child(279) {
background-color: #00b0ff;
box-shadow: #00b0ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.53s;
animation-delay: -19.53s;
}
.clr .dot:nth-child(280) {
background-color: #00adff;
box-shadow: #00adff 0px 0px 50px 2px;
-webkit-animation-delay: -19.6s;
animation-delay: -19.6s;
}
.clr .dot:nth-child(281) {
background-color: #00aaff;
box-shadow: #00aaff 0px 0px 50px 2px;
-webkit-animation-delay: -19.67s;
animation-delay: -19.67s;
}
.clr .dot:nth-child(282) {
background-color: #00a7ff;
box-shadow: #00a7ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.74s;
animation-delay: -19.74s;
}
.clr .dot:nth-child(283) {
background-color: #00a4ff;
box-shadow: #00a4ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.81s;
animation-delay: -19.81s;
}
.clr .dot:nth-child(284) {
background-color: #00a1ff;
box-shadow: #00a1ff 0px 0px 50px 2px;
-webkit-animation-delay: -19.88s;
animation-delay: -19.88s;
}
.clr .dot:nth-child(285) {
background-color: #009eff;
box-shadow: #009eff 0px 0px 50px 2px;
-webkit-animation-delay: -19.95s;
animation-delay: -19.95s;
}
.clr .dot:nth-child(286) {
background-color: #009bff;
box-shadow: #009bff 0px 0px 50px 2px;
-webkit-animation-delay: -20.02s;
animation-delay: -20.02s;
}
.clr .dot:nth-child(287) {
background-color: #0098ff;
box-shadow: #0098ff 0px 0px 50px 2px;
-webkit-animation-delay: -20.09s;
animation-delay: -20.09s;
}
.clr .dot:nth-child(288) {
background-color: #0095ff;
box-shadow: #0095ff 0px 0px 50px 2px;
-webkit-animation-delay: -20.16s;
animation-delay: -20.16s;
}
.clr .dot:nth-child(289) {
background-color: #0092ff;
box-shadow: #0092ff 0px 0px 50px 2px;
-webkit-animation-delay: -20.23s;
animation-delay: -20.23s;
}
.clr .dot:nth-child(290) {
background-color: #008fff;
box-shadow: #008fff 0px 0px 50px 2px;
-webkit-animation-delay: -20.3s;
animation-delay: -20.3s;
}
.clr .dot:nth-child(291) {
background-color: #008cff;
box-shadow: #008cff 0px 0px 50px 2px;
-webkit-animation-delay: -20.37s;
animation-delay: -20.37s;
}
.clr .dot:nth-child(292) {
background-color: #0089ff;
box-shadow: #0089ff 0px 0px 50px 2px;
-webkit-animation-delay: -20.44s;
animation-delay: -20.44s;
}
.clr .dot:nth-child(293) {
background-color: #0086ff;
box-shadow: #0086ff 0px 0px 50px 2px;
-webkit-animation-delay: -20.51s;
animation-delay: -20.51s;
}
.clr .dot:nth-child(294) {
background-color: #0083ff;
box-shadow: #0083ff 0px 0px 50px 2px;
-webkit-animation-delay: -20.58s;
animation-delay: -20.58s;
}
.clr .dot:nth-child(295) {
background-color: #0080ff;
box-shadow: #0080ff 0px 0px 50px 2px;
-webkit-animation-delay: -20.65s;
animation-delay: -20.65s;
}
.clr .dot:nth-child(296) {
background-color: #007dff;
box-shadow: #007dff 0px 0px 50px 2px;
-webkit-animation-delay: -20.72s;
animation-delay: -20.72s;
}
.clr .dot:nth-child(297) {
background-color: #007aff;
box-shadow: #007aff 0px 0px 50px 2px;
-webkit-animation-delay: -20.79s;
animation-delay: -20.79s;
}
.clr .dot:nth-child(298) {
background-color: #0077ff;
box-shadow: #0077ff 0px 0px 50px 2px;
-webkit-animation-delay: -20.86s;
animation-delay: -20.86s;
}
.clr .dot:nth-child(299) {
background-color: #0074ff;
box-shadow: #0074ff 0px 0px 50px 2px;
-webkit-animation-delay: -20.93s;
animation-delay: -20.93s;
}
.clr .dot:nth-child(300) {
background-color: #0071ff;
box-shadow: #0071ff 0px 0px 50px 2px;
-webkit-animation-delay: -21s;
animation-delay: -21s;
}
.clr .dot:nth-child(301) {
background-color: #006eff;
box-shadow: #006eff 0px 0px 50px 2px;
-webkit-animation-delay: -21.07s;
animation-delay: -21.07s;
}
.clr .dot:nth-child(302) {
background-color: #006bff;
box-shadow: #006bff 0px 0px 50px 2px;
-webkit-animation-delay: -21.14s;
animation-delay: -21.14s;
}
.clr .dot:nth-child(303) {
background-color: #0068ff;
box-shadow: #0068ff 0px 0px 50px 2px;
-webkit-animation-delay: -21.21s;
animation-delay: -21.21s;
}
.clr .dot:nth-child(304) {
background-color: #0065ff;
box-shadow: #0065ff 0px 0px 50px 2px;
-webkit-animation-delay: -21.28s;
animation-delay: -21.28s;
}
.clr .dot:nth-child(305) {
background-color: #0062ff;
box-shadow: #0062ff 0px 0px 50px 2px;
-webkit-animation-delay: -21.35s;
animation-delay: -21.35s;
}
.clr .dot:nth-child(306) {
background-color: #005fff;
box-shadow: #005fff 0px 0px 50px 2px;
-webkit-animation-delay: -21.42s;
animation-delay: -21.42s;
}
.clr .dot:nth-child(307) {
background-color: #005cff;
box-shadow: #005cff 0px 0px 50px 2px;
-webkit-animation-delay: -21.49s;
animation-delay: -21.49s;
}
.clr .dot:nth-child(308) {
background-color: #0059ff;
box-shadow: #0059ff 0px 0px 50px 2px;
-webkit-animation-delay: -21.56s;
animation-delay: -21.56s;
}
.clr .dot:nth-child(309) {
background-color: #0056ff;
box-shadow: #0056ff 0px 0px 50px 2px;
-webkit-animation-delay: -21.63s;
animation-delay: -21.63s;
}
.clr .dot:nth-child(310) {
background-color: #0053ff;
box-shadow: #0053ff 0px 0px 50px 2px;
-webkit-animation-delay: -21.7s;
animation-delay: -21.7s;
}
.clr .dot:nth-child(311) {
background-color: #0050ff;
box-shadow: #0050ff 0px 0px 50px 2px;
-webkit-animation-delay: -21.77s;
animation-delay: -21.77s;
}
.clr .dot:nth-child(312) {
background-color: #004dff;
box-shadow: #004dff 0px 0px 50px 2px;
-webkit-animation-delay: -21.84s;
animation-delay: -21.84s;
}
.clr .dot:nth-child(313) {
background-color: #004aff;
box-shadow: #004aff 0px 0px 50px 2px;
-webkit-animation-delay: -21.91s;
animation-delay: -21.91s;
}
.clr .dot:nth-child(314) {
background-color: #0047ff;
box-shadow: #0047ff 0px 0px 50px 2px;
-webkit-animation-delay: -21.98s;
animation-delay: -21.98s;
}
.clr .dot:nth-child(315) {
background-color: #0044ff;
box-shadow: #0044ff 0px 0px 50px 2px;
-webkit-animation-delay: -22.05s;
animation-delay: -22.05s;
}
.clr .dot:nth-child(316) {
background-color: #0041ff;
box-shadow: #0041ff 0px 0px 50px 2px;
-webkit-animation-delay: -22.12s;
animation-delay: -22.12s;
}
.clr .dot:nth-child(317) {
background-color: #003dff;
box-shadow: #003dff 0px 0px 50px 2px;
-webkit-animation-delay: -22.19s;
animation-delay: -22.19s;
}
.clr .dot:nth-child(318) {
background-color: #003aff;
box-shadow: #003aff 0px 0px 50px 2px;
-webkit-animation-delay: -22.26s;
animation-delay: -22.26s;
}
.clr .dot:nth-child(319) {
background-color: #0037ff;
box-shadow: #0037ff 0px 0px 50px 2px;
-webkit-animation-delay: -22.33s;
animation-delay: -22.33s;
}
.clr .dot:nth-child(320) {
background-color: #0034ff;
box-shadow: #0034ff 0px 0px 50px 2px;
-webkit-animation-delay: -22.4s;
animation-delay: -22.4s;
}
.clr .dot:nth-child(321) {
background-color: #0031ff;
box-shadow: #0031ff 0px 0px 50px 2px;
-webkit-animation-delay: -22.47s;
animation-delay: -22.47s;
}
.clr .dot:nth-child(322) {
background-color: #002eff;
box-shadow: #002eff 0px 0px 50px 2px;
-webkit-animation-delay: -22.54s;
animation-delay: -22.54s;
}
.clr .dot:nth-child(323) {
background-color: #002bff;
box-shadow: #002bff 0px 0px 50px 2px;
-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0