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