/* 定义页面预加载动画的样式 */
#preloadingAnimation{
  /* 设置预加载动画的定位方式和位置 */
  position:fixed;
  left:0;top:0;
  /* 设置预加载动画的高度和宽度 */
  height:100%;
  width:100%;
  /* 设置预加载动画的背景颜色 */
  background:#ffffff;
  /* 禁止文本选择 */
  user-select:none;
  /* 设置预加载动画的层级关系 */
  z-index: 9999;
  /* 隐藏溢出的内容 */
  overflow: hidden
}

/* 定义加载动画的样式 */
.lds-roller{
  /* 设置加载动画的显示方式和定位方式 */
  display:inline-block;
  position:relative;
  /* 设置加载动画的位置 */
  left:50%;
  top:50%;
  /* 设置加载动画的尺寸 */
  width:64px;
  height:64px;
  /* 将加载动画居中显示 */
  transform:translate(-50%,-50%);
}

/* 定义加载动画中每个部分的样式 */
.lds-roller div{
  /* 设置加载动画的动画效果 */
  animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
  /* 设置加载动画的变换原点 */
  transform-origin:32px 32px;
}

/* 定义加载动画中每个部分的伪元素样式 */
.lds-roller div:after{
  /* 设置伪元素的内容和显示方式 */
  content:" ";display:block;
  /* 设置伪元素的定位方式 */
  position:absolute;
  /* 设置伪元素的尺寸 */
  width:6px;
  height:6px;
  /* 设置伪元素的形状 */
  border-radius:50%;
  /* 设置伪元素的背景颜色 */
  background:#13c2c2;
  /* 设置伪元素的位置 */
  margin:-3px 0 0 -3px;
}

/* 定义加载动画中每个部分的动画延迟时间 */
.lds-roller div:nth-child(1){
  animation-delay:-0.036s;
}
.lds-roller div:nth-child(2){
  animation-delay:-0.072s;
}
.lds-roller div:nth-child(3){
  animation-delay:-0.108s;
}
.lds-roller div:nth-child(4){
  animation-delay:-0.144s;
}
.lds-roller div:nth-child(5){
  animation-delay:-0.18s;
}
.lds-roller div:nth-child(6){
  animation-delay:-0.216s;
}
.lds-roller div:nth-child(7){
  animation-delay:-0.252s;
}
.lds-roller div:nth-child(8){
  animation-delay:-0.288s;
}

/* 定义加载动画中每个部分的伪元素的位置 */
.lds-roller div:nth-child(1):after{
  top:50px;
  left:50px;
}
.lds-roller div:nth-child(2):after{
  top:54px;
  left:45px;
}
.lds-roller div:nth-child(3):after{
  top:57px;
  left:39px;
}
.lds-roller div:nth-child(4):after{
  top:58px;
  left:32px;
}
.lds-roller div:nth-child(5):after{
  top:57px;
  left:25px;
}
.lds-roller div:nth-child(6):after{
  top:54px;
  left:19px;
}
.lds-roller div:nth-child(7):after{
  top:50px;
  left:14px;
}
.lds-roller div:nth-child(8):after{
  top:45px;left:10px;
}

/* 定义预加载动画中的加载提示样式 */
#preloadingAnimation .load-tips{
  /* 设置加载提示的颜色和字体大小 */
  color: #13c2c2;font-size:2rem;
  /* 设置加载提示的定位方式 */
  position:absolute;
  /* 设置加载提示的位置 */
  left:50%;
  top:50%;
  /* 将加载提示居中显示 */
  transform:translate(-50%,-50%);
  /* 设置加载提示的外边距 */
  margin-top:80px;
  /* 设置加载提示的文本对齐方式 */
  text-align:center;
  /* 设置加载提示的宽度和高度 */
  width:400px;
  height:64px;
}

/* 定义加载动画的动画关键帧 */
@keyframes lds-roller{
  /* 设置动画开始时的旋转角度 */
  0%{transform:rotate(0deg);
  }
  /* 设置动画结束时的旋转角度 */
  100%{
    transform:rotate(360deg);
  }
}