Bagaimana untuk Mencipta Animasi Putaran CSS Tanpa Kesudahan untuk Memuatkan Ikon?

Animasi Putaran CSS Tanpa Kesudahan

Ikon pemuatan adalah penting untuk pengalaman pengguna, memberikan maklum balas visual semasa pemuatan tapak web. Menyesuaikan putaran ikon ini menggunakan CSS boleh meningkatkan fungsi dan estetikanya. Walau bagaimanapun, melaksanakan putaran tak terhingga dengan CSS boleh terbukti mencabar.

Pertimbangkan contoh berikut:

#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

<div id='test' class='rotating'></div>

Walaupun CSS ini kelihatan intuitif, ia gagal menghasilkan putaran tak terhingga yang dimaksudkan untuk ikon memuatkan. Untuk mencapai putaran yang tidak berkesudahan, animasi mesti digunakan menggunakan bingkai utama dan bukannya transformasi.

CSS yang diperbetulkan menggunakan bingkai utama berikut:

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

Kod yang diperbetulkan ini memastikan putaran ikon pemuatan yang lancar dan berterusan selama-lamanya, meningkatkan fungsi dan daya tarikan visualnya.

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