使用HTML/JavaScript/CSS沿循环路径移动div

我想使用HTML/CSS/JavaScript沿着圆形路径移动一个圆。有没有办法做到这一点？圆圈的代码添加如下：

.circle{
宽度：50px；
高度：50px；
显示：块；
-webkit边界半径：50px；
-khtml边界半径：50px；
-moz边界半径：50px；
边界半径：50px；
颜色：#fff；
背景色：#b9c1de；
}

现在是数学时间

function circle(){
    var width = 10,
        height = 10,
        offsetX = 100,
        offsetY = 100,
        x = Math.cos(new Date()) * width + offsetX;   //Remember high school?
        y = Math.sin(new Date()) * height + offsetY;

    //Do whatever you want here with the coordinates.
    document.getElementsByClassName("circle")[0].style.left = x;
    document.getElementsByClassName("circle")[0].style.top = y;

    setTimeout(circle, 50);
}

---

您可以使用纯css3实现这一点。这样写：

CSS

.dot{
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background:red;
    border-radius:50%;
}
.sun{
    width:200px;
    height:200px;
    position:absolute;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
    top:50px;
    left:50px;
}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } 
}

HTML

<div class="sun">
 <div class="dot"></div>
</div>​

​

检查这个

已更新

---

这是我设计的一个纯JavaScript解决方案。应该有很好的浏览器支持（不需要CSS3）。它是高度可配置的。确保查看JavaScript部分底部的配置选项。不需要图书馆

---

使用CSS在循环路径中移动容器div有两种方法：

1） 设置CSS变换属性的动画：
要旋转的元素必须有父元素。现在，如果要将子对象移动60度，请先将父对象旋转60度，然后将子对象旋转-60度（以相反的角度，使子对象看起来不倒置）。
使用CSS转换、CSS动画或Web动画API执行动画。

关于以下代码：
父项具有相对定位。同样，通过提供相等的高度、宽度、边界半径=50%使其成为圆形
子对象具有绝对位置。它已被赋予高度和宽度、顶部和左侧属性，以便显示在父对象的顶部中间

#parent {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    transform: rotate(0deg);
    transition: transform 0.7s linear;
}

#child {
    position: absolute;
    width: 80px;
    height: 80px;
    transform: rotate(0deg);
    transition: transform 0.7s linear;
    top: -40px;   
    left: 110px;
    border: 1px solid black;
}

$("#button").on('click', function() {
    $("#parent").css({ transform: 'rotate(60deg)' });
    $("#child").css({ transform: 'rotate(-60deg)' });
});

是我写的一篇博客文章。还包含一个演示

2） 设置CSS偏移位置属性的动画：
使用新的CSS运动路径或偏移路径，可以沿任何路径设置元素动画。然而，截至目前（2017年1月），它将只在最新版本的Chrome上工作。
必须使用偏移路径属性定义循环SVG路径。然后使用CSS过渡、CSS动画或Web动画API对此路径上的偏移距离特性设置动画。
除了定义SVG路径外，还可以设置偏移路径：边距框。这将路径定义为父对象的边距边界。如果父对象已被设置为具有边界半径的圆形，则路径也将是圆形的

#child {
    offset-path: margin-box;
}

---

有关运动路径循环动画的相关博文，请参阅。

Sandeep+1，但它不适用于firefox。如何在firefox上实现相同的结果。。。。