Wave Animation

<div class="wave-container">
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
</div>

.wave-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
}
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100px;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
  animation: wave-move 3s ease-in-out infinite;
  transform-origin: 50% 48%;
}
.wave:nth-child(2) {
  animation-delay: -1s;
  opacity: 0.5;
  height: 80px;
}
.wave:nth-child(3) {
  animation-delay: -2s;
  opacity: 0.3;
  height: 60px;
}
.wave::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
  transform: scale(1.5);
}
@keyframes wave-move {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}