如何使用CSS或JS实现5段文本沿椭圆形路径无限循环旋转效果

实现方案 #

你需要的文本沿椭圆路径无限循环旋转效果，可以用CSS原生的offset-path路径运动属性实现，不需要额外JS，最终修改后的代码如下：

HTML代码（和你原有结构一致，无需修改） #

<div class="oval" id="oval">
  <div class="floating-texts">
    <span class="text1 text">#text1</span>
    <span class="text2 text">#text2</span>
    <span class="text3 text">#text3</span>
    <span class="text4 text">#text4</span>
    <span class="text5 text">#text5</span>
  </div>
</div>

修改后的完整CSS代码 #

.oval {
  top: 20%;
  left: 65%;
  position: absolute;
  border: 2px solid black;
  width: 400px;
  height: 200px;
  background: transparent;
  border-radius: 200px / 100px;
}
/* 定义沿椭圆运动的动画 */
@keyframes ovalRotate {
  100% {
    offset-distance: 100%;
  }
}
.text {
  position: absolute;
  color: black;
  font-size: 1.2rem;
  /* 定义运动路径为和参考椭圆尺寸一致的椭圆 */
  offset-path: ellipse(200px 100px at center center);
  /* 固定文本保持水平，不会随路径方向旋转 */
  offset-rotate: 0deg;
  /* 动画配置：20秒转一圈，线性匀速，无限循环 */
  animation: ovalRotate 20s linear infinite;
}
/* 给5个文本设置不同的初始偏移，均匀分布在椭圆上 */
.text1 {
  offset-distance: 0%;
}
.text2 {
  offset-distance: 20%;
}
.text3 {
  offset-distance: 40%;
}
.text4 {
  offset-distance: 60%;
}
.text5 {
  offset-distance: 80%;
}

参数调整说明 #

• 要调整旋转速度，修改animation属性里的20s即可，数值越小转得越快
• 如果需要文本沿着椭圆路径的方向自动旋转，删掉offset-rotate: 0deg即可
• 要是你修改了椭圆的宽高，同步修改offset-path里的ellipse参数即可，第一个值是椭圆宽度的一半，第二个值是椭圆高度的一半

内容的提问来源于stack exchange，提问作者Pavan Sargar