小球环形转圈效果

首先我使用了html+js+css来实现这个效果，并且可以均匀分布小球之间的距离

<div class="big-circle">
      <div class="small-circle"></div>
      <div class="small-circle"></div>
      <div class="small-circle"></div>
      <div class="small-circle"></div>
      <div class="small-circle"></div>
      <div class="small-circle"></div>
      <div class="small-circle"></div>
      <div class="small-circle"></div>
      <div class="small-circle"></div>
      <div class="small-circle"></div>
</div>

里面的div就是旋转的小球，可以任意添加数量

.big-circle {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        /* background-color: red; */
        border: 1px solid black;
        text-align: center;
        margin: 0 auto;
        color: #fff;
        font-size: 25px;
        margin-top: 150px;

        /* margin-top: 35px; */
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 200px;
        position: relative;
        animation: rotate linear infinite 20s;
}
.small-circle {
        position: absolute;
        width: 75px;
        background-color: black;
        border-radius: 50%;
        height: 75px;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

这里就是css样式

const items = document.querySelectorAll(".big-circle .small-circle");
      const r = document.querySelector(".big-circle").clientWidth / 6;
      const count = items.length;
      const pieceDeg = 360 / count;
      for (let i = 0; i < count; i++) {
        let t = i * pieceDeg;
        t = (Math.PI / 180) * t;
        const x = Math.sin(t) * r;
        const y = -Math.cos(t) * r;
        items[i].style.transform = `translate(${x}px,${y}px)`;
      }

这是js部分代码，使用了函数计算