11

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

4 回答 4

18

您可以使用纯 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/

于 2012-06-12T06:03:16.317 回答
4

这是我拼凑的一个纯 JavaScript 解决方案。应该有很好的浏览器支持（不需要 CSS3）。它是高度可配置的。确保查看JavaScript 部分底部的配置选项。不需要图书馆。

http://jsfiddle.net/nN7ct/

于 2012-06-12T06:25:13.447 回答
2

现在是数学时间！

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);
}
于 2012-06-12T05:45:10.337 回答
0

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

1）动画CSS变换属性：
要旋转的元素必须有一个父元素。现在如果你想将孩子移动 60 度，首先将父级旋转 60 度，然后将孩子旋转 -60 度（相反的角度，这样孩子不会看起来倒立）。
使用 CSS 过渡、CSS 动画或 Web Animations 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 为该路径 上的offset-distance属性设置动画。
除了定义 SVG 路径之外，您还可以设置 set offset-path: margin-box。这会将路径定义为父级的边距边界。如果父级已使用边框半径设置为圆形，则路径也将是圆形的。

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


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

于 2017-01-18T08:43:17.473 回答