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

发布时间：2020-12-14 16:45:28 所属栏目：资源来源：网络整理

导读：我想使用 HTML / CSS / JavaScript沿着圆形路径移动一个圆圈.有没有办法实现这个目标？圆圈的代码添加如下： .circle{ width:50px; height:50px; display:block; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; -khtml-border-r

我想使用 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/

更新

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!