html转动的圆圈,html – 使用CSS在圆圈周围旋转对象？

Jquery解决方案适用于任何数量的外部项目.

Jquery从ThiefMaster♦无耻地偷走了他们在Q & A的回答

var radius = 100; // adjust to move out items in and out

var fields = $('.item'),container = $('#container'),width = container.width(),height = container.height();

var angle = 0,step = (2 * Math.PI) / fields.length;

fields.each(function() {

var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);

var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);

if (window.console) {

console.log($(this).text(),x,y);

}

$(this).css({

left: x + 'px',top: y + 'px'

});

angle += step;

});

body {

padding: 2em;

}

#container {

width: 200px;

height: 200px;

margin: 10px auto;

border: 1px solid #000;

position: relative;

border-radius: 50%;

animation: spin 10s linear infinite;

}

.item {

width: 30px;

height: 30px;

line-height: 30px;

text-align: center;

border-radius: 50%;

position: absolute;

background: #f00;

animation: spin 10s linear infinite reverse;

}

@keyframes spin {

100% {

transform: rotate(1turn);

}

}

1

2

3

4

5

6