GSAP - 如何在页面周围分布圆形？

问题描述

我有 4 个圆圈，我需要将它们分布在 4 个方向上。如果我允许绝对位置，则所有内容都混在一起，但我需要在页面中心并排放置每个圆圈。

问题是 Gsap 是一个带有变换或位置的分布圆，但是当我启用绝对位置时，圆就会混淆。

还有其他方法可以实现吗？

HTML

<div class="bg">
  <div class="center-area">
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
  </div>
</div>

CSS

.bg {
  background: #1d1d1d;
  width: 100%;
  height: 100vh;
}
.shape {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: red;
  display: inline-block;
/*   position: relative; */
}
.shape + .shape {
  margin-left: 10px;
}
.center-area {
/*   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.shape:nth-child(1) {
/*   position: absolute; */
}

GSAP

const timeline = gsap.timeline({ })
.to('.shape:nth-child(1)',{
  duration: 0.5,left: '0'
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gsap html javascript