我想使用
HTML / CSS /
JavaScript沿着圆形路径移动一个圆圈.有没有办法实现这个目标？圆圈的代码添加如下：
.circle{
width:50px;
height:50px;
display:block;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
-khtml-border-radius:50px;
color:#fff;
background-color:#b9c1de;
}
<div class="circle"></div>
解决方法
您可以使用纯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/
更新
