Amalan Projek: Perkongsian Pengalaman tentang Cara Menggunakan Animasi CSS untuk Mencipta Kesan Hebat

Animasi CSS ialah salah satu teknik yang biasa digunakan oleh banyak pembangun bahagian hadapan Ia boleh mencapai beberapa kesan yang sangat menarik, seperti butang sejuk, kesan pemuatan halaman yang lancar, kandungan halaman yang dinamik, dsb. Dalam artikel ini, saya akan berkongsi beberapa pengalaman tentang cara menggunakan animasi CSS untuk mencipta kesan yang menarik. Mari lihat!

1. Asas Animasi

Sebelum kita mula membuat animasi, kita perlu mengetahui beberapa asas. Pertama sekali, jika kita ingin menggunakan animasi CSS, kita perlu memahami konsep "animasi" dalam CSS. Animasi CSS dilaksanakan melalui kerangka utama. Kerangka kunci merujuk kepada keadaan tertentu dalam tempoh masa tertentu dan terdapat peralihan antara keadaan ini. Sebagai contoh, kita boleh menetapkan kedudukan elemen pada saat pertama kepada (0,0) dan kedudukan pada saat kedua kepada (100,100, elemen akan bergerak di sepanjang laluan ini.

Kedua, kita perlu memahami sintaks animasi CSS. Berikut ialah contoh mudah:

@keyframes example {
  0% {transform: translateX(0);}
  50% {transform: translateX(100px);}
  100% { transform: translateX(0);}
}

.example {
  animation: example 1s ease-in-out infinite;
}

Contoh ini menentukan keadaan animasi melalui @keyframes dan menggunakan animasi pada elemen tertentu melalui kelas .example. Dalam kod di atas, kami mentakrifkan animasi bernama contoh, yang mempunyai tiga keadaan: 0%, 50% dan 100%. Pada 0%, kedudukan unsur ialah kedudukan awal, iaitu, sesaran dalam arah paksi-X ialah 0. Pada 50%, kedudukan elemen dialihkan 100 piksel ke kanan. Pada 100%, elemen kembali ke kedudukan asalnya. Akhir sekali, kami menggunakan animasi pada elemen .example melalui atribut animasi.

Ini hanyalah contoh mudah Sudah tentu, terdapat banyak sintaks dan sifat lain yang boleh digunakan untuk animasi CSS, seperti tempoh animasi, kelewatan animasi, fungsi pemasaan animasi, dll. Dalam proses pengeluaran sebenar, kita perlu menggunakan sifat-sifat ini secara fleksibel mengikut keperluan tertentu.

2. Petua untuk membuat kesan hebat

Selepas menguasai pengetahuan asas animasi CSS, kita boleh mula mencipta beberapa kesan hebat. Di bawah saya akan berkongsi beberapa kemahiran praktikal:

2.1 Membuat animasi butang

Membuat animasi butang adalah keperluan yang sangat biasa. Di bawah ini kami akan menggunakan "butang goncang" sebagai contoh untuk memperkenalkan cara menggunakan animasi CSS untuk mencapai kesan ini.

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

button {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
}

Kod di atas mentakrifkan animasi yang dipanggil goncang dan kemudian menggunakannya pada butang. Dalam animasi ini, kami menyedari kesan pergerakan butang melalui atribut transform, dan melaraskan kesan pelonggaran animasi melalui fungsi cubic-bezier. Selepas menggunakan animasi ini pada butang, anda boleh melihat kesan "gegar" yang kami jangkakan.

2.2 Gambar terbang masuk dan keluar

Kesan ini agak seperti tayangan slaid, setiap kali gambar masuk dari atas atau bawah, dan kemudian gambar sebelumnya terbang keluar dari atas atau bawah. Kod berikut mencapai kesan ini:

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideOut {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

.slide-show {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.slide-show img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; 
}

.slide-show .slide1 {
  animation-name: slideIn;
}

.slide-show .slide2 {
  animation-name: slideOut;
}

.slide-show .slide2.active {
  animation-name: slideIn;
}

Dalam kod di atas, kami mentakrifkan dua animasi bernama slideIn dan slideOut, dengan itu mencapai kesan gambar terbang masuk dan keluar. Kemudian balut gambar melalui bekas .slide-show, dan tetapkan nama kelas yang berbeza untuk setiap gambar (seperti .slide1, .slide2). Apabila kita perlu menukar gambar, kita hanya perlu menukar nama kelas gambar semasa kepada "aktif" dan kemudian menggunakan JavaScript untuk mengendalikan DOM.

Dua contoh di atas hanyalah sebahagian besar daripada animasi CSS saya harap ia dapat membantu pembaca menguasai animasi CSS dengan lebih baik dan mencipta kesan yang lebih hebat.

Atas ialah kandungan terperinci Amalan Projek: Perkongsian Pengalaman tentang Cara Menggunakan Animasi CSS untuk Mencipta Kesan Hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!