用js写一个 多个元素围绕圆形边缘旋转的 效果

当然可以！你可以使用 JavaScript 和 CSS 来创建多个元素围绕圆形边缘旋转的效果。以下是一个简单的示例代码：

HTML:

<div class="circle">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS:

.circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: lightgray;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  transform-origin: bottom center;
}

.item:nth-child(1) {
  transform: rotate(0deg) translateX(80px) rotate(0deg);
}

.item:nth-child(2) {
  transform: rotate(72deg) translateX(80px) rotate(-72deg);
}

.item:nth-child(3) {
  transform: rotate(144deg) translateX(80px) rotate(-144deg);
}

.item:nth-child(4) {
  transform: rotate(216deg) translateX(80px) rotate(-216deg);
}

.item:nth-child(5) {
  transform: rotate(288deg) translateX(80px) rotate(-288deg);
}

在上面的示例中，我们首先创建一个圆形容器（class="circle"），然后在容器内部创建多个元素（class="item"）。通过使用 `transform` 属性和 `transform-origin` 属性，我们可以将这些元素围绕圆形边缘旋转。

请注意，上面的示例中只包含了五个元素，你可以根据需要添加更多的元素，并相应地调整 `transform` 属性中的角度和平移值来实现更多元素的围绕旋转效果。