HTML/JavaScript/CSS kullanarak dairesel bir yol boyunca bir div taşıma

Question

HTML/CSS/JavaScript'i kullanarak dairesel bir yol boyunca bir daire taşımak istiyorum. bunu arşivlemenin bir yolu var mı? O Matematik zamanı size

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

Answer 1

Bunu, saf css3 ile başarabilirsiniz. Böyle yaz:

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>​ 

Kontrol bu http://jsfiddle.net/r4AFV/

GÜNCELLEME

http://jsfiddle.net/r4AFV/1/

Answer 2

ancak bu bağlantıyı kontrol edin: daire için kod aşağıda eklenir!

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 3

için yararlı olabilir, Hey bu benim kodu değil

.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> 

Answer 4

Birlikte atadığım saf bir JavaScript çözümü. Çok iyi bir tarayıcı desteği olmalıdır (CSS3 gerekli değildir). Çok yapılandırılabilir. JavaScript bölümünün alt altındaki yapılandırma seçeneklerine baktığınızdan emin olun. Kütüphane gerektirmez.

http://jsfiddle.net/nN7ct/

Answer 5

CSS ile dairesel bir yol içinde, bir kap div hareket 2 yol vardır:

1) CSS animasyon özelliği dönüşümü:
döndürülecekse elemanı olmalıdır Bir ana öğe. Şimdi çocuğu 60 derece hareket ettirmek istiyorsanız, önce ebeveyni 60 derece döndürün ve daha sonra çocuğu -60 derecelik (çocuğun ters çevrilmemesi için ters açıyla) çevirin.
Animasyon gerçekleştirmek için CSS geçişi, CSS animasyonu veya Web Animations API kullanın.

Aşağıdaki kod hakkında:
Veli göreli konumlandırmaya sahiptir. Ayrıca eşit yükseklik, genişlik, kenarlık yarıçapı = =% 50 vererek dairesel hale getirin.
Çocuk mutlak bir konuma sahiptir. Bir üst & genişlik, üst & sol özellikler verilmiştir, böylece üst öğenin üst ortasında görünecektir.

#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

yazdığım bir blog yazısı olduğunu. Ayrıca bir demo içerir. CSS ofset konumlu özelliği animasyon

2):
yeni CSS hareket yolunu veya ofset yolu ile, herhangi bir yol boyunca bir öğe animasyon mümkündür.Ancak şu andan itibaren (Ocak 2017), yalnızca Chrome'un en yeni sürümünde çalışacaktır.
Ofset yolu özelliği ile dairesel bir SVG yolu tanımlamanız gerekir. Ardından, CSS geçişi, CSS animasyonu veya Web Animasyonları API'sı kullanılarak ofset mesafesi özelliğini bu yol üzerinde canlandırın.
Bir SVG yolunu tanımlamak dışında, ofset-yolu: kenar boşluğu kutusu. Bu, yolu ebeveyin sınır sınırı olarak tanımlar. Ebeveyn sınır-yarıçapı ile dairesel yapılmışsa, yol da dairesel olacaktır.

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

Hareket Yolu ile dairesel animasyon uğraşan ilgili blog yayını için http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-path bakınız.