Bagaimana untuk Mencipta Animasi Objek Berputar Pekeliling Menggunakan CSS dan jQuery?

CSS untuk putaran bulat objek

Menggunakan CSS untuk memutar berbilang objek di sekeliling bulatan adalah mencabar. Inilah cara terbaik untuk menyelesaikan masalah ini:

Menggunakan jQuery

jQuery menyediakan penyelesaian mudah untuk memutarkan sebarang bilangan elemen luar. Berikut ialah kod yang dilaksanakan menggunakan jQuery:

var radius = 100; // 调整以移动对象进出
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;
});

Menggunakan animasi CSS

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Animasi Objek Berputar Pekeliling Menggunakan CSS dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!