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

代码语言:html

所属分类:加载滚动

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

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

网友评论0