css3加载中效果

在网页设计中，加载中效果是非常重要的，它可以让用户在等待页面内容加载的同时，感受到整个网站的活力和生机。CSS3提供了丰富的加载中效果，采用CSS3实现加载中效果可以让页面更加炫酷，提升用户体验。

代码示例：
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%,-50%);
}

.loading::before,.loading::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.3;
  Box-shadow: inset 0 0 0 2em #fff;
  animation: loading 2s infinite ease;
}

.loading::after {
  animation-delay: -1s;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

上述代码实现了一个简单的圆形加载中效果。使用了伪元素::before和::after实现两个重叠的圆形，定义了动画名称为loading并使用infinite参数让动画一直循环播放，使用了ease函数让动画变得平滑自然。使用animation-delay参数并设置为-1s可以让::after比::before的动画延迟1秒开始，实现更加流畅的动画效果。

加载中效果不仅仅可以是圆形，还可以是矩形、星形等各种形状。此外，CSS3也为加载中效果提供了更多的动画效果，例如弹跳、渐变等，在使用时可以结合实际需求进行自由组合和调整。