Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan guling berterusan-tutorial css-php.cn

Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan guling berterusan

PHPz

Lepaskan： 2023-10-21 08:41:08

asal

1393 orang telah melayarinya

Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan guling berterusan

Panduan Animasi CSS: Ajar anda langkah demi langkah cara mencipta kesan khas tatal berterusan

Dalam reka bentuk dan pembangunan web, kesan animasi merupakan salah satu faktor penting untuk meningkatkan pengalaman pengguna. Animasi CSS adalah salah satu kaedah biasa untuk mencapai pelbagai kesan dinamik. Artikel ini akan mengajar anda langkah demi langkah cara membuat animasi CSS dengan kesan guling berterusan dan memperkenalkan proses pelaksanaan setiap langkah secara terperinci melalui contoh kod tertentu.

Pertama, kami memerlukan fail HTML dan helaian gaya CSS yang berkaitan.

Struktur fail HTML adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="box" id="box"></div>
</body>
</html>

Salin selepas log masuk

Seterusnya, kita perlu menentukan gaya yang berkaitan dalam helaian gaya CSS.

Helaian gaya CSS adalah seperti berikut:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

Salin selepas log masuk

Seterusnya, kami menggunakan peraturan @keyframes untuk mentakrifkan kesan animasi. Peraturan @keyframes digunakan untuk mencipta animasi. Dengan mentakrifkan gaya yang berbeza pada peratusan bingkai utama tertentu, penyemak imbas menghidupkan perubahan dalam gaya tersebut.

Tambahkan peraturan @keyframes pada helaian gaya CSS:

@keyframes roll {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

Salin selepas log masuk

Seterusnya, kami menggunakan animasi pada elemen .box. Ini boleh dicapai menggunakan atribut animasi.

Ubah suai gaya .box dalam helaian gaya CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: roll 2s linear infinite;
}

Salin selepas log masuk

Akhir sekali, kita perlu menggunakan JavaScript untuk mengawal permulaan dan jeda animasi.

Tambah kod JavaScript berikut di kepala fail HTML:

<script>
  var box = document.getElementById("box");
  box.addEventListener("click", function() {
    if (box.style.animationPlayState === "paused") {
      box.style.animationPlayState = "running";
    } else {
      box.style.animationPlayState = "paused";
    }
  });
</script>

Salin selepas log masuk

Setakat ini, kami telah melengkapkan animasi CSS bagi kesan guling berterusan. Pengguna boleh mengklik pada elemen .box untuk mengawal jeda dan permulaan animasi.

Ringkasan:
Melalui pengenalan dan contoh kod khusus artikel ini, kami telah mempelajari cara menggunakan animasi CSS untuk mencipta kesan guling berterusan. Dengan hanya beberapa baris kod CSS dan beberapa kawalan JavaScript, anda boleh mencapai kesan dinamik yang menarik. Saya harap artikel ini membantu dan saya doakan anda berjaya dalam mencapai kesan animasi!

Atas ialah kandungan terperinci Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan guling berterusan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!