使用 HTML/JavaScript/CSS 沿圆形路径移动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10990942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving a div along a circular path using HTML/JavaScript/CSS
提问by Vaquita
I would like to move a circle along a circular path using HTML/CSS/JavaScript. Is there a way to achieve this? The code for circle is added below:
我想使用 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>
回答by sandeep
You can achieve this with pure css3. Write like this:
您可以使用纯 css3 来实现这一点。像这样写：
CSS
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
HTML
<div class="sun">
<div class="dot"></div>
</div>?
Check this http://jsfiddle.net/r4AFV/
检查这个http://jsfiddle.net/r4AFV/
UPDATED
更新
回答by Nathan Wall
Here's a pure JavaScript solution I threw together. Should have very good browser support (no CSS3 required). It's highly configurable. Make sure you look at the configuration options at the bottomof the JavaScript section. No library required.
这是我拼凑的纯 JavaScript 解决方案。应该有很好的浏览器支持（不需要 CSS3）。它是高度可配置的。请务必查看JavaScript 部分底部的配置选项。不需要图书馆。
回答by u283863
It is Math time!
现在是数学时间！
function circle(){
var width = 10,
height = 10,
offsetX = 100,
offsetY = 100,
x = Math.cos(new Date()) * width + offsetX; //Remember high school?
y = Math.sin(new Date()) * height + offsetY;
//Do whatever you want here with the coordinates.
document.getElementsByClassName("circle")[0].style.left = x;
document.getElementsByClassName("circle")[0].style.top = y;
setTimeout(circle, 50);
}
回答by Useful Angle
There are 2 ways of moving a container div in a circular path with CSS :
有两种使用 CSS 在圆形路径中移动容器 div 的方法：
1) Animating the CSS transform property :
The element which is to be rotated must have a parent element. Now if you want to move the child by 60 degrees, first rotate the parent by 60 degrees and then rotate the child by -60 degress (an opposite angle so that the child does not look inverted).
Use CSS transition, CSS animation or Web Animations API to perform the animation.
About the below code :
Parent has relative positioning. Also make it circular by giving equal height, width, border-radius = 50%
Child has absolute position. It has been given a height & width, top & left properties so that it appears at the top-middle of the parent.
1) 动画 CSS 变换属性：
要旋转的元素必须有一个父元素。现在，如果您想将子级移动 60 度，首先将父级旋转 60 度，然后将子级旋转 -60 度（相反的角度，这样子级不会看起来倒置）。
使用 CSS 过渡、CSS 动画或 Web Animations API 来执行动画。
关于下面的代码：
Parent 有相对定位。还可以通过赋予相等的高度、宽度、边框半径 = 50% 使其成为圆形，
孩子具有绝对位置。它被赋予了高度和宽度，顶部和左侧属性，以便它出现在父级的顶部中间。
#parent {
position: relative;
width: 300px;
height: 300px;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 50%;
transform: rotate(0deg);
transition: transform 0.7s linear;
}
#child {
position: absolute;
width: 80px;
height: 80px;
transform: rotate(0deg);
transition: transform 0.7s linear;
top: -40px;
left: 110px;
border: 1px solid black;
}
$("#button").on('click', function() {
$("#parent").css({ transform: 'rotate(60deg)' });
$("#child").css({ transform: 'rotate(-60deg)' });
});
http://usefulangle.com/post/32/moving-an-element-in-circular-path-with-cssis a blog post that I wrote. Also contains a demo.
http://usefulangle.com/post/32/moving-an-element-in-circular-path-with-css是我写的一篇博客文章。还包含一个演示。
2) Animating the CSS offset-position property :
With the new CSS Motion Path or Offset Path, it is possible to animate an element along ANY path. However as of now (Jan 2017) it will work only on the latest version of Chrome.
You have to define a circular SVG path with offset-pathproperty. Then animate the offset-distanceproperty over this path using CSS transition, CSS animation or Web Animations API.
Other than defining a SVG path, you can give set offset-path: margin-box. This will define the path as the margin boundary of the parent. If the parent has been made circular with border-radius, the path will be circular too.
2) 动画 CSS offset-position 属性：
使用新的 CSS Motion Path 或 Offset Path，可以沿任何路径动画元素。但是，截至目前（2017 年 1 月），它仅适用于最新版本的 Chrome。
您必须使用offset-path属性定义圆形 SVG 路径。然后使用 CSS 过渡、CSS 动画或 Web 动画 API 为这条路径上的offset-distance属性设置动画。
除了定义 SVG 路径之外，您还可以设置 set offset-path: margin-box。这会将路径定义为父级的边距边界。如果父级已用边界半径制成圆形，则路径也将是圆形的。
#child {
offset-path: margin-box;
}
See http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-pathfor the related blog post dealing in circular animation with Motion Path.
有关使用 Motion Path 处理圆形动画的相关博客文章，请参阅http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-path。
