前端 css实现多个水球图，且每个水球中有2道波浪，如何遍历一个div生成

要在前端CSS中实现多个水球图，并且每个水球包含两道波浪效果，你可以通过CSS动画和伪元素结合来完成这个视觉效果。首先，你需要创建一组相同的`<div>`元素作为水球容器，然后为每个`<div>`添加一些基本样式，如大小、圆润和背景色。

<!-- 示例HTML结构 -->
<div class="bubble" id="bubble1"></div>
<div class="bubble" id="bubble2"></div>
<!-- ... 更多水球... -->

接下来，使用CSS来设置样式：

.bubble {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #8BC34A; /* 水球颜色 */
  position: relative;
}

/* 波浪效果 */
.bubble::before,
.bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
}

.bubble::before {
  width: 100%;
  height: 20%; /* 波浪高度的一半 */
  background-image: linear-gradient(to right, rgba(255, 255, 255, .1), transparent);
  animation: wave 1s ease-in-out infinite alternate;
}

.bubble::after {
  width: 100%;
  height: 40%; /* 波浪总高度 */
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .1) 50%, transparent);
  animation: wave 2s ease-in-out infinite alternate;
}

@keyframes wave {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

在这个例子中，`:before`伪元素负责第一道波浪，`:after`负责第二道波浪，它们都设置了透明度渐变和左右移动的动画效果。为了动态生成更多水球，你可以在JavaScript中使用循环或模板引擎，为每个ID渲染一个新的`<div>`元素并插入到文档中。