Tutorial Animasi CSS: Ajar anda langkah demi langkah cara melaksanakan kesan kecerunan penskalaan

Tutorial Animasi CSS: Mengajar anda langkah demi langkah cara melaksanakan kesan kecerunan zum

Dalam reka bentuk web moden, kesan animasi merupakan salah satu elemen penting untuk menarik perhatian pengguna dan meningkatkan pengalaman pengguna. Animasi CSS ialah kesan animasi berdasarkan atribut gaya CSS Kesan dinamik boleh dicapai dengan menukar nilai atribut gaya elemen. Dalam artikel ini, kami akan mengajar anda langkah demi langkah cara menggunakan animasi CSS untuk mencapai kesan penskalaan dan kecerunan, bersama-sama dengan contoh kod khusus.

1. Buat struktur HTML

Pertama, kita perlu mencipta struktur HTML untuk meletakkan elemen yang perlu dianimasikan. Dalam contoh ini, kami mencipta bekas yang mengandungi ikon bulat terapung. Kod HTML adalah seperti berikut:

<div class="container">
  <div class="circle"></div>
</div>

2. Tambah gaya

Seterusnya, kita perlu menambah gaya pada ikon bekas dan bulatan. Kami akan menggunakan CSS untuk menentukan gaya bekas, termasuk sifat seperti lebar, tinggi dan warna latar belakang. Gaya ikon bulat akan diubah suai kemudian dalam animasi. Kod CSS adalah seperti berikut:

.container {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 60px;
  height: 60px;
  background-color: #ff7f50;
  border-radius: 50%;
}

3. Mencipta animasi

Kini, kami mula mencipta kesan animasi. Kami akan menggunakan bingkai utama untuk menyediakan pelbagai peringkat animasi dan menerapkannya pada ikon bulat. Dalam contoh ini, kami akan melaksanakan kesan kecerunan skala, menjadikan ikon bulat berkembang dari kecil kepada besar dan menukar warna latar belakang secara beransur-ansur. Kod CSS adalah seperti berikut:

@keyframes scale-effect {
  0% {
    transform: scale(0.5);
    background-color: #ff7f50;
  }
  50% {
    transform: scale(1.5);
    background-color: #87ceeb;
  }
  100% {
    transform: scale(1);
    background-color: #ff7f50;
  }
}

.circle {
  animation: scale-effect 2s infinite;
}

Dalam kod di atas, kami mentakrifkan animasi kerangka utama yang dipanggil skala-kesan. Pada peringkat 0% animasi, kami menetapkan skala ikon bulatan kepada 0.5 dan menetapkan warna latar belakang kepada oren. Pada peringkat 50%, kami meningkatkan zum kepada 1.5 dan warna latar belakang bertukar kepada biru langit. Akhirnya, pada peringkat 100%, kami menetapkan skala kembali kepada 1 dan warna latar belakang kembali kepada oren. Kita boleh menggunakan animasi ini pada ikon bulat dengan menggunakan sifat animasi pada kelas .circle.

4. Kesan lengkap

Kini, kami telah melengkapkan kod CSS untuk kesan kecerunan skala. Simpan fail HTML dan CSS, dan buka fail HTML dalam penyemak imbas anda, anda akan melihat ikon bulat terapung yang sentiasa berskala dan menukar warna latar belakang.

Melalui tutorial ini, anda mempelajari cara menggunakan animasi CSS untuk mencapai kesan kecerunan skala. Dalam reka bentuk web sebenar, anda boleh menyesuaikan pelbagai peringkat dan sifat animasi mengikut keperluan untuk mendapatkan kesan animasi yang lebih kaya dan menarik. Saya harap tutorial ini akan membantu pembelajaran dan latihan anda!

Atas ialah kandungan terperinci Tutorial Animasi CSS: Ajar anda langkah demi langkah cara melaksanakan kesan kecerunan penskalaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!