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

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

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