Wie erstelle ich eine kreisförmige rotierende Objektanimation mit CSS und jQuery?

CSS für die kreisförmige Drehung von Objekten

Die Verwendung von CSS zum Drehen mehrerer Objekte um einen Kreis ist eine Herausforderung. So lösen Sie dieses Problem am besten:

Verwendung von jQuery

jQuery bietet eine einfache Lösung, um eine beliebige Anzahl äußerer Elemente zu drehen. Das Folgende ist der mit jQuery implementierte Code:

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

Mit CSS-Animation

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>

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine kreisförmige rotierende Objektanimation mit CSS und jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!