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

There's a small challenge that has taken my sleep for a few days. I didn't get success in all my attempts. To be honest, I didn't even get close.

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

So, basically I need to animate the object (sun) so that it travels continuously along the path of the oval. When the sun is "in the sky" (that is, on the red part of the oval shown below) it should be visible, but it should not be visible when it is "below the horizon" (the light gray part of the oval below).

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

I've seen many solutions with perfectly round objects, but none with an oval/elliptical object.

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

I can't use a canvas here and it'll need to be responsive, but I can use CSS3 and some JavaScript plugin.

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

Here is a link with my "sandbox", if you wanted to use it.
http://codepen.io/caio/pen/pvKoJx

如果你想使用它，这里是我的“沙盒”的链接。 http://codepen.io/caio/pen/pvKoJx

---

Only to view the dashed, you can create an object with these properties.

只有查看虚线，您才能创建具有这些属性的对象。

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

1 个解决方案

#1

you should take a look to this Jquery plugin : https://github.com/CSS-Tricks/jQuery-Circulate-Plugin

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

I think this could do the job !

我认为这可以做到这一点！

Edit : the demo don't work on css-tricks.com, you need to download it.

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