Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan gegaran

Panduan Animasi CSS: Ajar anda langkah demi langkah cara mencipta kesan gegaran

Dalam reka bentuk web, kesan animasi boleh menambah rasa meriah dan interaktif pada halaman. Animasi CSS ialah teknologi yang mencapai kesan animasi dengan menggunakan peraturan CSS pada halaman web. Salah satu kesan animasi biasa ialah kesan Shake, yang boleh menambah kesan animasi gegaran pada elemen dan menambah daya hidup pada halaman web. Artikel ini akan membawa anda dari awal, mengajar anda langkah demi langkah cara mencipta kesan gegaran dan memberikan contoh kod khusus.

Langkah Pertama: Buat Struktur HTML
Pertama, kita perlu mencipta elemen yang diandaikan sebagai "goncang" dalam fail HTML. Anda boleh membungkusnya dengan teg

dan menambah atribut ID unik padanya, seperti "elemen goyang". Berikut ialah contoh kod:

<div id="shake-element">
  这里是要添加抖动特效的内容
</div>

Langkah 2: Tentukan gaya CSS
Seterusnya, kita perlu mentakrifkan gaya CSS untuk menambah kesan jitter pada elemen. Kami akan menentukan kedudukan permulaan untuk elemen dan kemudian mencipta kesan jitter dengan menggunakan kesan animasi bingkai utama. Berikut ialah contoh kod gaya CSS:

#shake-element {
  position: relative;
  animation: shake-animation 1s infinite;
}

@keyframes shake-animation {
  0% { transform: translateX(0); }
  10% { transform: translateX(-10px); }
  20% { transform: translateX(10px); }
  30% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  50% { transform: translateX(-10px); }
  60% { transform: translateX(10px); }
  70% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  90% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

Dalam kod CSS ini, kami mula-mula menetapkan atribut position: relative来确保其相对于原始位置进行抖动。然后，通过关键帧动画@keyframes来定义抖动动画的具体效果。在关键帧动画中，每个百分比定义了元素的不同位置，通过transform: translateX() untuk elemen untuk mengawal terjemahan mendatar elemen. Dalam contoh, kami menggunakan 10% masa untuk mengawal kedudukan jitter elemen.

Langkah 3: Gunakan gaya CSS
Dalam langkah terakhir, kita perlu menggunakan gaya CSS yang ditentukan pada elemen HTML, iaitu, pilihnya melalui atribut ID teg dan rujuk gaya CSS. Dalam teg dalam fail HTML, kami boleh menggunakan teg