纯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: #c1.........完整代码请登录后点击上方下载按钮下载查看