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

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

WBOY

Lepaskan： 2023-10-20 14:27:12

asal

1306 orang telah melayarinya

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>

Salin selepas log masuk

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);
  }
}

Salin selepas log masuk

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!