Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Animasi Objek Berputar Pekeliling Menggunakan CSS dan jQuery?

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

Susan Sarandon
Susan Sarandonasal
2024-12-11 04:21:18235semak imbas

How to Create a Circular Rotating Object Animation Using CSS and 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn