使用 HTML/JavaScript/CSS 沿圆形路径移动 div

Question

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

 .circle {
    width: 50px;
    height: 50px;
    display: block;
    -webkit-border-radius: 50px;
     -khtml-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    color: #fff;
    background-color: #b9c1de;
}

 <div class="circle"></div>

原文由 jay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用纯 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>​

检查这个 http://jsfiddle.net/r4AFV/

更新

http://jsfiddle.net/r4AFV/1/

原文由 sandeep 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是我拼凑的纯 JavaScript 解决方案。应该有很好的浏览器支持（不需要 CSS3）。它是高度可配置的。请务必查看 JavaScript 部分 底部 的配置选项。不需要图书馆。

http://jsfiddle.net/nN7ct/

原文由 Nathan Wall 发布，翻译遵循 CC BY-SA 3.0 许可协议