使用CSS或JavaScript循环通过椭圆/椭圆形对象

Question

这是一个小小的挑战，让我睡了几天。我在所有的尝试中都没有取得成功。说实话，我甚至没有接近。

所以，基本上我需要为对象（太阳）设置动画，使其沿着椭圆的路径连续移动。当太阳落在天空中时＃34; （也就是说，在下面显示的椭圆形的红色部分上）它应该是可见的，但是当它在地平线以下时它不应该是可见的。 （下面椭圆形的浅灰色部分）。

我见过许多具有完美圆形物体的解决方案，但没有一个具有椭圆形/椭圆形物体。

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

如果你想使用它，请点击我的＆＃34; sandbox＆＃34;的链接 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上运行，您需要下载它。