有趣的css - 水波纹加载动画

以下是实现水波纹加载动画的CSS代码示例：

.wave-loader {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 50px auto;
}
 
.wave-loader::before,
.wave-loader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #3498db;
  border-radius: 50%;
  animation: wave 2s linear infinite;
}
 
.wave-loader::before {
  background-color: rgba(255, 255, 255, 0.5);
  animation-delay: -1s;
}
 
@keyframes wave {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

这段CSS代码创建了一个圆形的加载器，通过::before和::after伪元素创建了两个重叠的圆环，通过动态改变它们的位置和旋转角度，实现了水波纹般的动画效果。通过调整width、height、background-color和动画参数，可以进一步定制动画的外观。