使用 CSS 或 JavaScript 循环遍历 oval/elliptical 个对象

Question

有一个小挑战让我睡了几天。我所有的尝试都没有成功。老实说，我什至没有接近

所以，基本上我需要为对象（太阳）设置动画，以便它沿着椭圆形的路径连续移动。太阳在"in the sky"时（即下图椭圆红色部分）应该可见，在"below the horizon"（椭圆浅灰色部分）时应该不可见下面）。

我见过很多关于完美圆形物体的解决方案，但是 none 使用 oval/elliptical 物体。

我不能在这里使用 canvas，它需要响应，但我可以使用 CSS3 和一些 JavaScript 插件。

这里有一个 link 和我的 "sandbox"，如果你想用的话。
http://codepen.io/caio/pen/pvKoJx

仅查看虚线，您可以创建具有这些属性的对象。

.path {
  border: 3px dashed black;
  border-radius: 100%;
  height: 360px;
  left: calc(50% - 295px);
  position: absolute;
  top: 165px;
  width: 590px;
}

Answer 1

你应该看看这个 Jquery 插件：https://github.com/CSS-Tricks/jQuery-Circulate-Plugin

我认为这可以完成工作！

编辑：演示不适用于 css-tricks.com，您需要下载它。

使用 CSS 或 JavaScript 循环遍历 oval/elliptical 个对象

Cycle through oval/elliptical object with CSS or JavaScript

javascript

css

animation

ellipse