Rumah > Artikel > hujung hadapan web > Tutorial Animasi CSS: Ajar anda langkah demi langkah cara melaksanakan kesan putaran dan zum
Tutorial Animasi CSS: Ajar anda langkah demi langkah cara melaksanakan kesan putaran dan zum
- PHPzasal
- 2023-10-18 10:22:481687semak imbas
Tutorial Animasi CSS: Mengajar anda langkah demi langkah cara melaksanakan kesan putaran dan penskalaan
Animasi CSS ialah salah satu teknologi penting untuk mencapai kesan interaktif pada halaman web. Tutorial ini akan mengajar anda langkah demi langkah cara menggunakan CSS untuk mencapai kesan putaran dan penskalaan. Sebelum mempelajari tutorial ini, sila pastikan anda mempunyai pemahaman tertentu tentang asas CSS.
- Persediaan
Sebelum anda mula, anda memerlukan editor untuk menulis kod, seperti Teks Sublime, Kod Visual Studio, dsb. Semasa menulis kod, anda boleh mencipta fail HTML dan memperkenalkan gaya CSS ke dalamnya.
- Buat struktur HTML
Pertama, kita perlu mencipta struktur HTML. Dalam contoh ini kita akan membuat bulatan mudah.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="circle"></div> </body> </html>
Dalam kod di atas, kami memperkenalkan fail CSS bernama style.css dan mencipta elemen div dengan bulatan kelas dalam badan.
- Menulis gaya CSS
Seterusnya, kami akan menulis gaya CSS dalam fail style.css. Mula-mula, kita perlu menetapkan lebar dan ketinggian elemen .circle dan tetapkan bentuknya kepada bulatan.
.circle {
width: 200px;
height: 200px;
background-color: #ff0000;
border-radius: 50%;
}Dalam kod di atas, kami menetapkan lebar dan ketinggian elemen .circle kepada 200px dan menetapkan bucunya kepada 50%, dengan itu membentuk bulatan.
- Tambah kesan animasi
Seterusnya, kami akan menambah kesan animasi pada elemen .circle. Animasi ini akan merangkumi dua bahagian: putaran dan penskalaan.
Pertama, kami akan menambah animasi putaran. Dalam fail .style.css, tambahkan kod berikut:
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.circle {
/* 省略之前的代码 */
animation: rotate 4s infinite;
}Dalam kod di atas, kami telah menentukan animasi yang dipanggil rotate menggunakan kata kunci @keyframes. Animasi ini bermula dari keadaan awal 0%, memutar elemen .circle 0 darjah, ke keadaan akhir 100%, memutar elemen .circle 360 darjah. Kami kemudian menggunakan animasi ini pada elemen .circle menggunakan atribut animasi dan menetapkan tempoh animasi kepada 4 saat, mengulangi masa yang tidak terhingga.
Seterusnya, kami akan menambah animasi zum. Dalam fail .style.css, tambahkan kod berikut:
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.circle {
/* 省略之前的代码 */
animation: rotate 4s infinite, scale 2s infinite;
}Dalam kod di atas, kami telah menentukan animasi yang dipanggil skala menggunakan kata kunci @keyframes. Animasi ini bermula daripada keadaan awal 0%, mengekalkan elemen .circle pada saiz asalnya, kepada keadaan pertengahan 50%, membesarkan elemen .circle 1.5 kali, kepada keadaan akhir 100%, mengembalikan elemen .circle kepada saiz asalnya. Kami kemudian menggunakan animasi ini pada elemen .circle menggunakan atribut animasi dan menetapkan tempoh animasi kepada 2 saat, mengulangi masa yang tidak terhingga.
- Paparan kesan
Kini, anda boleh menyimpan dan menjalankan fail HTML ini dan melihat kesannya dalam penyemak imbas. Anda akan melihat bulatan berputar dan mengezum. Anda boleh mengubah suai gaya CSS dan sifat animasi mengikut keperluan anda untuk mencapai kesan putaran dan penskalaan yang berbeza.
Ringkasan
Animasi CSS boleh membantu kami mencapai pelbagai kesan interaktif dalam halaman web. Dalam tutorial ini, kami mengajar anda langkah demi langkah cara menggunakan CSS untuk mencapai kesan putaran dan penskalaan. Dengan mempelajari tutorial ini, saya harap anda boleh menguasai teknologi animasi CSS asas dan mengaplikasikannya dalam projek sebenar. Jika anda ingin mengetahui lebih lanjut tentang teknik dan kaedah animasi CSS, sila teruskan belajar secara mendalam. Semoga berjaya menulis animasi CSS yang menakjubkan!
Atas ialah kandungan terperinci Tutorial Animasi CSS: Ajar anda langkah demi langkah cara melaksanakan kesan putaran dan zum. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!