Bagaimana untuk mencipta animasi berputar berterusan menggunakan CSS tulen?-tutorial css-php.cn

Bagaimana untuk mencipta animasi berputar berterusan menggunakan CSS tulen?

Linda Hamilton

Lepaskan： 2024-11-05 10:24:02

asal

506 orang telah melayarinya

How to create a continuously rotating animation using pure CSS?

Animasi Putaran Tanpa Kesudahan Menggunakan CSS

Permintaan:

Putar ikon pemuatan selama-lamanya menggunakan tulen CSS.

Kod:

<code class="css">#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;
}</code>

Salin selepas log masuk

Masalah:

Kod yang disediakan tidak memulakan animasi putaran sebagai dijangka.

Penyelesaian:

Untuk mencapai putaran berterusan menggunakan CSS, kita perlu menggunakan animasi. Dalam kes ini, kami menggunakan peraturan @keyframes untuk mentakrifkan animasi dan sifat CSS animasi untuk menggunakannya.

Kod Kemas Kini:

<code class="css">@-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;
}</code>

Salin selepas log masuk

Kod dikemas kini ini mentakrifkan animasi berputar, yang terdiri daripada putaran 360 darjah dalam tempoh 2 saat. Tetapan kiraan lelaran tak terhingga memastikan animasi berulang selama-lamanya.

Atas ialah kandungan terperinci Bagaimana untuk mencipta animasi berputar berterusan menggunakan CSS tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!