Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan gegaran-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 20, 2023 pm 02:27 PM

animasi cssTutorial langkah demi langkahKesan khas yang menggeletar

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

Panduan Animasi CSS: Ajar anda langkah demi langkah cara mencipta kesan khas gegar

Dalam reka bentuk web, kesan animasi merupakan salah satu elemen penting untuk meningkatkan pengalaman pengguna dan menarik perhatian pengguna. Animasi CSS ialah teknologi yang menggunakan CSS tulen untuk mencapai kesan animasi. Hari ini, kami akan mengajar anda langkah demi langkah cara mencipta kesan gegaran yang menakjubkan untuk menjadikan halaman web anda lebih jelas dan menarik.

Mula-mula, mari buat struktur HTML asas. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title>CSS动画指南</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box"></div>
</body>
</html>

Seterusnya, kita perlu menambah gaya dan definisi animasi yang berkaitan pada fail CSS (diandaikan sebagai style.css di sini). Kodnya adalah seperti berikut:

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(-10px, -10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0);
  }
}

Dalam kod di atas, kami menambah kesan animasi 0.5 saat pada elemen .box dan menetapkan nama animasi kepada goncang. Kemudian, kami mentakrifkan bingkai utama animasi goncang melalui kata kunci @keyframes. .box元素添加了一个0.5秒的动画效果，并将动画名称设置为shake。然后，我们通过@keyframes关键字定义了shake动画的关键帧。

在关键帧中，我们设置了五个时间点的样式变化。0%表示动画的起始状态，100%表示动画的结束状态。25%、50%和75%分别表示了动画在不同时间点的中间状态。通过使用transform属性和translate函数，我们可以使元素在水平和竖直方向上产生位移，从而实现颤抖的效果。

最后，我们需要将上述代码保存为style.css

Dalam bingkai utama, kami menetapkan perubahan gaya pada lima titik masa. 0% mewakili keadaan permulaan animasi, dan 100% mewakili keadaan akhir animasi. 25%, 50% dan 75% masing-masing mewakili keadaan perantaraan animasi pada titik masa yang berbeza. Dengan menggunakan atribut transform dan fungsi terjemah, kita boleh menggantikan elemen secara mendatar dan menegak untuk mencapai kesan gementar.

Akhir sekali, kita perlu menyimpan kod di atas sebagai fail style.css dan mengaitkannya dengan fail HTML. Kemudian, kita boleh melihat kesan gegaran kita dalam pelayar.

Di atas adalah langkah lengkap untuk mencipta kesan khas menggeletar. Anda boleh melaraskan parameter seperti tempoh animasi, anjakan dan warna mengikut keperluan anda untuk menjadikannya lebih sesuai untuk reka bentuk web anda. 🎜🎜Untuk meringkaskan, teknologi animasi CSS menyediakan pereka web dengan cara yang mudah dan berkuasa untuk mencapai kesan animasi. Dengan menguasai teknologi dan alatan yang berkaitan, anda boleh dengan mudah menambahkan pelbagai kesan animasi pada halaman web anda untuk meningkatkan pengalaman pengguna dan menarik perhatian pengguna. Saya harap artikel ini berguna kepada anda, dan saya berharap anda pergi lebih jauh dan lebih jauh di jalan reka bentuk web! 🎜

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

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?Apr 18, 2025 am 11:34 AM

Saya mendapat soalan ini pada hari yang lain. Pemikiran pertama saya ialah: soalan pelik! Kekhususan adalah mengenai pemilih, dan at-peraturan bukan pemilih, jadi ... tidak relevan?

Bolehkah anda bersarang @media dan @support pertanyaan?Apr 18, 2025 am 11:32 AM

Ya, anda boleh, dan ia tidak begitu penting dalam perintah apa. Preprocessor CSS tidak diperlukan. Ia berfungsi dalam CSS biasa.

Cache Cache PantasApr 18, 2025 am 11:23 AM

Anda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas

Dalam mencari timbunan yang memantau kualiti dan kerumitan CSSApr 18, 2025 am 11:22 AM

Ramai pemaju menulis tentang bagaimana untuk mengekalkan asas CSS, namun tidak banyak daripada mereka menulis tentang bagaimana mereka mengukur kualiti asas kod tersebut. Pasti, kita ada

Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilaiApr 18, 2025 am 11:08 AM

Pernahkah anda mempunyai bentuk yang perlu menerima sedikit teks yang sewenang -wenangnya? Seperti nama atau apa sahaja. Itu ' s betul -betul apa. Terdapat banyak

Persidangan Depan di ZürichApr 18, 2025 am 11:03 AM

Saya sangat teruja untuk menuju ke Zürich, Switzerland untuk persidangan depan (suka nama dan url!). Saya tidak pernah ke Switzerland sebelum ini, jadi saya teruja

Membina aplikasi tanpa pelayan penuh dengan pekerja CloudflareApr 18, 2025 am 10:58 AM

Salah satu perkembangan kegemaran saya dalam pembangunan perisian adalah kedatangan tanpa pelayan. Sebagai pemaju yang mempunyai kecenderungan untuk terjebak dalam butiran

Membuat Laluan Dinamik dalam Aplikasi NUXTApr 18, 2025 am 10:53 AM

Dalam siaran ini, kami akan menggunakan demo kedai e -dagang yang saya bina dan digunakan untuk Netlify untuk menunjukkan bagaimana kami boleh membuat laluan dinamik untuk data masuk. Ia adil

See all articles