Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk melaksanakan kesan khas balingan bola

Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk melaksanakan kesan khas balingan bola

Pengenalan:
Dalam reka bentuk web moden, animasi CSS telah menjadi elemen yang sangat diperlukan. Ia boleh menambah kemeriahan dan minat pada halaman web dan meningkatkan pengalaman pengguna. Tutorial ini akan mengajar anda cara menggunakan CSS untuk mencapai kesan balingan bola Melalui demonstrasi langkah demi langkah, anda boleh menguasai teknik ini dengan mudah.

Langkah 1: Buat Struktur HTML

Mula-mula, kita perlu mencipta struktur HTML untuk menempatkan sfera kita. Dalam fail HTML, tambahkan kod berikut:

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

Dalam struktur ini, sfera diletakkan di dalam bekas yang dipanggil "bekas".

Langkah 2: Tambah Gaya CSS

Sekarang, kami akan menambah gaya pada elemen HTML ini. Buka fail CSS dan tambah kod berikut:

.container {
  width: 500px;
  height: 500px;
  position: relative;
}

.ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

Di sini, kami menetapkan lebar dan ketinggian bekas dan meletakkannya secara relatif. Sfera ditetapkan kepada kedudukan mutlak dan diletakkan di sudut kiri atas bekas.

Langkah 3: Cipta Animasi CSS

Sekarang, kita akan mencipta kesan animasi untuk sfera. Tambahkan kod berikut dalam fail CSS:

@keyframes throw {
  0% {
    top: 0;
    left: 0;
  }
  50% {
    top: 200px;
    left: 300px;
  }
  100% {
    top: 0;
    left: 0;
  }
}

.ball {
  animation-name: throw;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Dalam kod ini, kami mentakrifkan animasi kerangka utama yang dipanggil "buang". Pada bingkai kunci 0%, kedudukan sfera ialah kedudukan awal (atas: 0; kiri: 0;). Pada bingkai kekunci 50%, kedudukan sfera ditetapkan pada titik tertinggi tindakan lontaran (atas: 200px; kiri: 300px;). Akhirnya, pada bingkai utama 100%, sfera kembali ke kedudukan asalnya.

Kami menggunakan animasi ini pada sfera dan menetapkan tempoh animasi kepada 2 saat dan mengulangi masa yang tidak terhingga (kiraan-iterasi-animasi: tak terhingga;).

Langkah 4: Pratonton kesannya

Simpan dan muatkan fail HTML anda dan pratonton halaman web. Anda akan melihat bola dibaling di sepanjang laluan animasi pratetap dan kembali ke kedudukan asalnya pada penghujung. Melaraskan parameter dalam CSS boleh membenarkan bola dibaling dengan cara lain, atau menukar kelajuan dan bilangan balingan.

Ringkasan:
Melalui tutorial ini, anda telah berjaya melaksanakan kesan balingan sfera menggunakan CSS. Animasi CSS adalah alat yang sangat berguna dan menarik dalam reka bentuk web. Menguasai teknik ini akan membantu anda mencipta halaman web yang lebih menarik dan interaktif. Kini, anda boleh menggunakan kaedah ini untuk mencipta kesan animasi lain yang menarik dan terus meneroka lebih banyak kemungkinan animasi CSS. Saya harap anda boleh mencipta lebih banyak karya yang menakjubkan!

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