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>

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/

Answer 2

这是一个纯粹的JavaScript解决方案，我把它放在一起。应该有非常好的浏览器支持（不需要CSS3）。它具有高度可配置性。确保查看JavaScript部分的 bottom 中的配置选项。不需要图书馆。

http://jsfiddle.net/nN7ct/

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

    setTimeout(circle, 50);
}

Answer 4

使用CSS在圆形路径中移动容器div有两种方法：

1）动画CSS转换属性：
要旋转的元素必须具有父元素。现在，如果要将孩子移动60度，首先将父级旋转60度，然后将孩子旋转-60度（相反的角度，使孩子看起来不会倒置）。
使用CSS转换，CSS动画或Web动画API来执行动画。

关于以下代码：
父母有相对定位。通过给出相等的高度，宽度，边界半径= 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-css是我写的博客文章。还包含一个演示。

2）动画CSS偏移位置属性：
使用新的CSS运动路径或偏移路径，可以沿任意路径为元素设置动画。但截至目前（2017年1月），它仅适用于最新版本的Chrome。
您必须使用 offset-path 属性定义循环SVG路径。然后使用CSS转换，CSS动画或Web动画API在此路径上设置偏移距离属性的动画。
除了定义SVG路径之外，您还可以设置偏移路径：margin-box 。这会将路径定义为父级的边距边界。如果父级已经使用border-radius制作圆形，则路径也将是圆形的。

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

有关使用Motion Path处理圆形动画的相关博文，请参阅http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-path。

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

4 个答案: