css实现无限循环的loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现无限循环的loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
div {
  width: 12px;
  height: 12px;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 50%;
}

div:nth-child(0) {
  background: black;
  box-shadow: 0 0 20px 20px rgba(0, 85, 128, 0.03);
}

div:nth-child(1) {
  background: #00070a;
  box-shadow: 0 0 20px 20px rgba(0, 88, 133, 0.03);
}

div:nth-child(2) {
  background: #000e14;
  box-shadow: 0 0 20px 20px rgba(0, 92, 138, 0.03);
}

div:nth-child(3) {
  background: #00141f;
  box-shadow: 0 0 20px 20px rgba(0, 95, 143, 0.03);
}

div:nth-child(4) {
  background: #001b29;
  box-shadow: 0 0 20px 20px rgba(0, 99, 148, 0.03);
}

div:nth-child(5) {
  background: #002233;
  box-shadow: 0 0 20px 20px rgba(0, 102, 153, 0.03);
}

div:nth-child(6) {
  background: #00293d;
  box-shadow: 0 0 20px 20px rgba(0, 105, 158, 0.03);
}

div:nth-child(7) {
  background: #003047;
  box-shadow: 0 0 20px 20px rgba(0, 109, 163, 0.03);
}

div:nth-child(8) {
  background: #003652;
  box-shadow: 0 0 20px 20px rgba(0, 112, 168, 0.03);
}

div:nth-child(9) {
  background: #003d5c;
  box-shadow: 0 0 20px 20px rgba(0, 116, 173, 0.03);
}

div:nth-child(10) {
  background: #004466;
  box-shadow: 0 0 20px 20px rgba(0, 119, 179, 0.03);
}

div:nth-child(11) {
  background: #004b70;
  box-shadow: 0 0 20px 20px rgba(0, 122, 184, 0.03);
}

div:nth-child(12) {
  background: #00527a;
  box-shadow: 0 0 20px 20px rgba(0, 126, 189, 0.03);
}

div:nth-child(13) {
  background: #005885;
  box-shadow: 0 0 20px 20px rgba(0, 129, 194, 0.03);
}

div:nth-child(14) {
  background: #005f8f;
  box-shadow: 0 0 20px 20px rgba(0, 133, 199, 0.03);
}

div:nth-child(15) {
  background: #006699;
  box-shadow: 0 0 20px 20px rgba(0, 136, 204, 0.03);
}

div:nth-child(16) {
  background: #006da3;
  box-shadow: 0 0 20px 20px rgba(0, 139, 209, 0.03);
}

div:nth-child(17) {
  background: #0074ad;
  box-shadow: 0 0 20px 20px rgba(0, 143, 214, 0.03);
}

div:nth-child(18) {
  background: #007ab8;
  box-shadow: 0 0 20px 20px rgba(0, 146, 219, 0.03);
}

div:nth-child(19) {
  background: #0081c2;
  box-shadow: 0 0 20px 20px rgba(0, 150, 224, 0.03);
}

div:nth-child(20) {
  background: #0088cc;
  box-shadow: 0 0 20px 20px rgba(0, 153, 230, 0.03);
}

div:nth-child(21) {
  background: #008fd6;
  box-shadow: 0 0 20px 20px rgba(0, 156, 235, 0.03);
}

div:nth-child(22) {
  background: #0096e0;
  box-shadow: 0 0 20px 20px rgba(0, 160, 240, 0.03);
}

div:nth-child(23) {
  background: #009ceb;
  box-shadow: 0 0 20px 20px rgba(0, 163, 245, 0.03);
}

div:nth-child(24) {
  background: #00a3f5;
  box-shadow: 0 0 20px 20px rgba(0, 167, 250, 0.03);
}

div:nth-child(25) {
  background: #00aaff;
  box-shadow: 0 0 20px 20px rgba(0, 170, 255, 0.03);
}

div:nth-child(26) {
  background: #0aadff;
  box-shadow: 0 0 20px 20px rgba(5, 172, 255, 0.03);
}

div:nth-child(27) {
  background: #14b1ff;
  box-shadow: 0 0 20px 20px rgba(10, 173, 255, 0.03);
}

div:nth-child(28) {
  background: #1fb4ff;
  box-shadow: 0 0 20px 20px rgba(15, 175, 255, 0.03);
}

div:nth-child(29) {
  background: #29b8ff;
  box-shadow: 0 0 20px 20px rgba(20, 177, 255, 0.03);
}

div:nth-child(30) {
  background: #33bbff;
  box-shadow: 0 0 20px 20px rgba(26, 179, 255, 0.03);
}

div:nth-child(31) {
  background: #3dbeff;
  box-shadow: 0 0 20px 20px rgba(31, 180, 255, 0.03);
}

div:nth-child(32) {
  background: #47c2ff;
  box-shadow: 0 0 20px 20px rgba(36, 182, 255, 0.03);
}

div:nth-child(33) {
  background: #52c5ff;
  box-shadow: 0 0 20px 20px rgba(41, 184, 255, 0.03);
}

div:nth-child(34) {
  background: #5cc9ff;
  box-shadow: 0 0 20px 20px rgba(46, 185, 255, 0.03);
}

div:nth-child(35) {
  background: #66ccff;
  box-shadow: 0 0 20px 20px rgba(51, 187, 255, 0.03);
}

div:nth-child(36) {
  background: #70cfff;
  box-shadow: 0 0 20px 20px rgba(56, 189, 255, 0.03);
}

div:nth-child(37) {
  background: #7ad3ff;
  box-shadow: 0 0 20px 20px rgba(61, 190, 255, 0.03);
}

div:nth-child(38) {
  background: #85d6ff;
  box-shadow: 0 0 20px 20px rgba(66, 192, 255, 0.03);
}

div:nth-child(39) {
  background: #8fdaff;
  box-shadow: 0 0 20px 20px rgba(71, 194, 255, 0.03);
}

div:nt.........完整代码请登录后点击上方下载按钮下载查看