使用HTML/JavaScript/CSS沿圓形路徑移動div

我想使用HTML/CSS/JavaScript沿着圓形路徑移動圓圈。有沒有辦法做到這一點？爲圓下面的代碼添加：使用HTML/JavaScript/CSS沿圓形路徑移動div

.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 class="circle"></div>

來源

2012-06-12 Vaquita

你可以用純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-12 06:03:16 sandeep

Sandeep +1爲此，但它不工作在Firefox上如何可以在Firefox上實現相同的結果.... –

對於CSS3的+1！注意：這僅適用於Webkit瀏覽器。 –

檢查我更新的小提琴，這是在Firefox中工作也 – sandeep

嘿，這不是我的代碼，

但檢查這個環節，可能你

http://jsfiddle.net/W69s6/20/

來源

2012-06-12 05:37:32

感謝您的快速回放 – Vaquita

它更好地將代碼粘貼到您的答案中。如果它滿足您的需求，其他 – anu

會更容易接受答案... –

是有幫助的，是數學的時間！

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); 
}

來源

2012-06-12 05:45:10

下面是我扔在一起的純JavaScript解決方案。應該有非常好的瀏覽器支持（不需要CSS3）。它高度可配置。請確保您查看JavaScript部分的底部的配置選項。沒有圖書館需要。

http://jsfiddle.net/nN7ct/

來源

2012-06-12 06:25:13

有2種方式在圓形路徑中移動的容器DIV與CSS的：

1）動畫的CSS變換屬性：
其中要被旋轉的元件必須具有一個父元素。現在，如果要將孩子移動60度，請首先將父母旋轉60度，然後將兒童旋轉-60 degress（相反的角度，以便孩子看起來不倒）。
使用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。
您必須使用偏移路徑屬性定義圓形SVG路徑。然後使用CSS過渡，CSS動畫或Web動畫API在此路徑上動畫偏移距離屬性。
除了定義SVG路徑，您可以給集offset-path：margin-box。這會將路徑定義爲父級的邊界邊界。如果父項已被製作爲具有邊界半徑的圓形，則該路徑也將是圓形的。

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

見http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-path對相關的博客文章，圓形動畫處理運動路徑。

來源

2017-01-18 08:43:17

使用HTML/JavaScript/CSS沿圓形路徑移動div

回答

相關問題