Bagaimana untuk Mencipta Animasi Putaran CSS Tanpa Kesudahan?

Melaksanakan Animasi Putaran CSS Tanpa Kesudahan

Masalah:

Bercita-cita untuk memutar ikon pemuatan secara berterusan menggunakan CSS, kod yang disediakan gagal menghasilkan animasi yang diingini. Bagaimanakah seseorang boleh mencapai putaran ini dengan berkesan menggunakan CSS?

Penyelesaian:

Untuk mencapai putaran tanpa henti menggunakan CSS, gunakan langkah berikut:

1. Tambahkan Kerangka Kunci Animasi CSS:

   • Tentukan Bingkai Kekunci Berputar dalam tatatanda @keyframes.
   • Tetapkan dari dan kepada keadaan untuk penjelmaan putaran.

2. Gunakan Animasi pada Elemen Sasaran:

   • Buat kelas berputar dalam CSS anda.
   • Gunakan animasi ke elemen yang dikehendaki menggunakan animasi-nama, animasi-tempoh dan animasi-iteration-count.

3. Sertakan Awalan Vendor:

   • Tambah awalan -webkit-, -moz-, dsb. untuk keserasian merentas penyemak imbas.

Kod Contoh:

<code class="css">@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

Html:

<code class="html"><div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div></code>

Kod yang disemak ini memastikan putaran berterusan elemen dengan lelaran yang tidak berkesudahan, menyelesaikan isu yang dihadapi dengan percubaan sebelumnya.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Animasi Putaran CSS Tanpa Kesudahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!