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

- jay

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/

- sandeep

---

Sandeep +1，但在Firefox上无法正常工作，如何在Firefox上实现相同的结果... - Shailender Arora

Answer 2

这里提供了一个纯JavaScript的解决方案，非常适用于各种浏览器（无需CSS3）。它可以高度配置。请确保查看JavaScript部分底部的配置选项。不需要使用库。 http://jsfiddle.net/nN7ct/

- Nathan Wall

Answer 3

现在是数学时间！

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+"px";
    document.getElementsByClassName("circle")[0].style.top = y+"px";

    setTimeout(circle, 50);
}

- Derek 朕會功夫

Answer 4

使用CSS有两种方法将容器div沿着圆形路径移动：

1）通过CSS transform属性进行动画：
要旋转的元素必须有一个父元素。现在，如果您想将子元素移动60度，请先将父元素旋转60度，然后将子元素旋转-60度（相反的角度，以使子元素不会倒置）。
使用CSS transition、CSS animation或Web Animations API执行动画。

关于下面的代码：
父元素具有相对定位。还通过给等高、等宽、border-radius = 50%来使其成为圆形。
子元素具有绝对位置。已经给出了高度和宽度、top和left属性，以便它出现在父元素的顶部中间。

#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-css 是我写的一篇博客文章，同时包含一个演示。

2) 动画化 CSS offset-position 属性：
使用新的 CSS 运动路径或偏移路径，可以沿着任何路径动画元素。但目前（2017年1月）仅适用于最新版本的 Chrome 浏览器。
必须使用 offset-path 属性定义一个圆形 SVG 路径，然后使用 CSS 过渡、CSS 动画或 Web Animations API 沿该路径动画 offset-distance 属性。
除了定义 SVG 路径外，还可以设置 offset-path: margin-box。这将把路径定义为父元素的边距边界。如果父元素通过 border-radius 变成了圆形，则路径也将是圆形的。

#child {
    offset-path: margin-box;
}

请参考http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-path相关博客文章，了解有关使用运动路径进行圆形动画的内容。

- Useful Angle