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

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

Dalam reka bentuk web hari ini, kesan animasi telah menjadi kunci untuk menarik perhatian pengguna dan Salah satu faktor penting untuk meningkatkan pengalaman pengguna. Antaranya, animasi CSS adalah salah satu kaedah biasa untuk mencapai pelbagai kesan. Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk mencipta kesan kilauan yang menakjubkan dan memberikan contoh kod khusus.

Kesan denyar boleh membuat elemen halaman berkelip atau berkelip di bawah cahaya, memberikan orang perasaan yang meriah. Berikut akan menunjukkan cara menggunakan CSS untuk mencapai kesan ini melalui contoh mudah.

Pertama, buat elemen div dalam HTML dan berikannya ID sebagai pemilih untuk penggayaan CSS. Kodnya adalah seperti berikut:

<div id="shine-effect"></div>

Seterusnya, dalam fail CSS, kami akan menggunakan peraturan @keyframes untuk mentakrifkan kesan animasi denyar. Peraturan @keyframes digunakan untuk mencipta animasi Anda boleh menentukan satu atau lebih bingkai utama dalam animasi dan menetapkan gaya bingkai utama.

@keyframes shine {
  0% { opacity: 0; } // 初始状态设置为透明
  50% { opacity: 1; } // 50%时设置为完全显示
  100% { opacity: 0; } // 结束时再次设置为透明
}

Dalam kod di atas, kami mentakrifkan animasi bernama "shine", yang mempunyai tiga bingkai utama. Ketelusan keadaan awal ialah 0, pada 50% ketelusan dipaparkan sepenuhnya pada 1, dan pada 100% ketelusan ditetapkan kepada 0 semula.

Seterusnya, kami menentukan gaya untuk elemen div yang baru kami buat dan menggunakan kesan animasi pada elemen tersebut. Kodnya adalah seperti berikut:

#shine-effect {
  width: 100px;  // 设置宽度
  height: 100px;  // 设置高度
  background-color: yellow;  // 设置背景颜色
  animation: shine 2s infinite; // 应用动画效果，2s表示动画持续时间，infinite表示无限循环播放
}

Dalam kod di atas, kami menentukan lebar, tinggi dan warna latar belakang elemen div. Kami mencapai kesan ini dengan menggunakan animasi "bersinar" pada elemen, menggunakan atribut animasi. Di sini, kami menetapkan tempoh animasi kepada 2 saat dan menggunakan kata kunci tak terhingga untuk mencapai main balik gelung tak terhingga.

Akhir sekali, simpan kod di atas sebagai fail style.css dan pautkannya ke fail HTML. Kodnya adalah seperti berikut:

<link rel="stylesheet" href="style.css">

Simpan dan muatkan fail HTML, anda akan melihat segi empat sama kuning dengan kesan berkelip.

Anda boleh menyesuaikan kesan kilauan dengan menukar parameter dalam kod di atas. Sebagai contoh, anda boleh menukar lebar, ketinggian, warna, dsb. elemen, atau melaraskan tempoh dan bilangan gelung animasi untuk mencapai kesan yang berbeza.

Ringkasan:

Dengan panduan artikel ini, anda mempelajari cara menggunakan CSS untuk mencipta kesan kilauan yang menakjubkan. Anda boleh mencipta pelbagai kesan animasi berbeza dengan mudah dengan menggunakan peraturan @keyframes untuk menentukan bingkai utama animasi anda dan menggunakan atribut animasi untuk menggunakan animasi pada elemen. Saya harap artikel ini akan membantu anda mempelajari animasi CSS, dan saya berharap anda mencapai hasil yang lebih cemerlang dalam reka bentuk web!

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