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也为加载中效果提供了更多的动画效果，例如弹跳、渐变等，在使用时可以结合实际需求进行自由组合和调整。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！