使用HTMLJavaScriptCSS沿圆形路径移动div

概述我想使用 HTML / CSS / JavaScript沿着圆形路径移动一个圆圈.有没有办法实现这个目标？圆圈的代码添加如下： .circle{ width:50px; height:50px; display:block; border-radius:50px; -moz-border-radius:50px; -webkit-border-rad 我想使用 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 ></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 > <div ></div></div>​

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

更新

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

总结

以上是内存溢出为你收集整理的使用HTML / JavaScript / CSS沿圆形路径移动div全部内容，希望文章能够帮你解决使用HTML / JavaScript / CSS沿圆形路径移动div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。