CSS3实现的4种水波特效

CSS3可以实现各种炫酷的水波特效，以下是实现这四种水波特效的示例代码：

1. 圆形水波特效：

.wave-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #00a67c;
  overflow: hidden;
}
 
.wave-circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: radial-gradient(circle at center, transparent 50%, #00a67c 50%);
  background-size: 200% 200%;
  animation: wave-animation 5s linear infinite;
}
 
@keyframes wave-animation {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
    background-position: 0 0;
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg);
    background-position: 200% 200%;
  }
}

2. 长方形水波特效：

.wave-rect {
  position: relative;
  width: 200px;
  height: 100px;
  background: #00a67c;
  overflow: hidden;
}
 
.wave-rect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: linear-gradient(to right, transparent 50%, #00a67c 50%);
  background-size: 200% 200%;
  animation: wave-animation 5s linear infinite;
}
 
@keyframes wave-animation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    background-position: 0 0;
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
    background-position: 200% 200%;
  }
}

3. 椭圆形水波特效：

.wave-ellipse {
  position: relative;
  width: 200px;
  height: 100px;
  background: #00a67c;
  overflow: hidden;
}
 
.wave-ellipse::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: radial-gradient(circle at center, transparent 50%, #00a67c 50%);
  background-size: 200% 200%;
  animation: wave-animation 5s linear infinite;
}
 
@keyframes wave-animation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    background-position: 0 0;
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
    background-position: 200% 200%;
  }
}

4. 多层叠加水波特效：

.wave-multiple {
  position: relative;
  width: 200px;
  height: 100px;
  background: #00a67c;
  overflow: hidden;
}
 
.wave-multiple::before,
.wave-multiple::after {
  content: '';
  position