【CSS加载动画特效】28种纯CSS实现的加载loading动态特效

以下是28种纯CSS实现的loading动画特效的示例代码：

1. 旋转圆环(Spinning Circles)

.loading-spinning-circles {
  width: 50px;
  height: 50px;
  position: relative;
}
 
.loading-spinning-circles:before, .loading-spinning-circles:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background: #333;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}
 
.loading-spinning-circles:before {
  animation-delay: 0.5s;
}
 
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

2. 旋转方块(Spinning Blocks)

.loading-spinning-blocks {
  width: 50px;
  height: 50px;
  position: relative;
  background: #333;
  animation: spin 2s linear infinite;
}
 
.loading-spinning-blocks:before, .loading-spinning-blocks:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background: #333;
  animation: spin 2s linear infinite;
}
 
.loading-spinning-blocks:before {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  animation-delay: 0.5s;
}
 
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

每种特效的CSS代码都非常精简，主要通过CSS动画实现旋转和变化等视觉效果，从而模拟出一种加载中的动画感。这些动画可以直接用在你的网页中作为加载指示器，也可以作为其他交互元素的装饰。