使用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>

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/