如何使用CSS3实现波浪式图片墙

<div class="wave-wall">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>

.wave-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px; /* 图片之间的间隙 */
}
.wave-wall img {
  width: 150px; /* 图片宽度 */
  height: auto; /* 自动调整高度以保持比例 */
  transition: transform 0.5s ease; /* 平滑变换效果 */
}

.wave-wall img:nth-child(4n+1) { transform: translateY(-10px); }
.wave-wall img:nth-child(4n+2) { transform: translateY(0); }
.wave-wall img:nth-child(4n+3) { transform: translateY(10px); }
.wave-wall img:nth-child(4n+4) { transform: translateY(0); }

@keyframes wave-animation {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.wave-wall img {
  /* 其他样式 */
  animation: wave-animation 2s infinite alternate; /* 应用动画 */
}