Bagaimana untuk Memastikan Imej Berpusat Semasa Animasi Penskalaan CSS3?

Bagaimana untuk mengekalkan imej berpusat semasa animasi?

Dalam situasi seperti yang ditunjukkan dalam biola yang anda berikan, di mana animasi CSS3 menskalakan elemen dalam kedudukan mutlak elemen lain yang berpusat di tengah, anda mungkin menghadapi salah jajaran elemen semasa animasi. Khususnya, ia mungkin kelihatan di luar tengah, seperti yang ditunjukkan oleh petak merah dalam biola.

Untuk membetulkannya, kita boleh mengubah suai sifat asal-ubah. Isu timbul apabila transformasi baharu (dalam animasi) mengatasi yang asal. Dalam kes ini, transformasi asal berfungsi untuk mengekalkan penjajaran berpusat elemen.

Untuk mengelakkan masalah ini, kita mesti menggabungkan transformasi dalam sifat transformasi yang sama, memastikan susunan yang betul. Kod berikut menggambarkan pendekatan yang diperbetulkan:

@keyframes ripple_large {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Imej Berpusat Semasa Animasi Penskalaan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!