Rumah >hujung hadapan web >tutorial css >Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan guling berterusan
Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan guling berterusan
- PHPzasal
- 2023-10-21 08:41:081508semak imbas
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>
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;
}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);
}
}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;
}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>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!