Bagaimana untuk Mencapai Pergerakan Kiri-Kanan yang Lancar untuk Div ​​yang Diposisikan Benar-Benar dalam CSS?

Pergerakan Kiri-Kanan dalam CSS: Penyelesaian Generik

Dalam bidang reka bentuk web, keupayaan untuk menghidupkan elemen dengan kecairan adalah penting . Walau bagaimanapun, apabila menyentuh pergerakan kiri-kanan div yang diposisikan secara mutlak, cabaran biasa timbul: elemen itu hilang seketika sebelum muncul semula. Isu ini selalunya berpunca daripada peralihan animasi yang tidak betul.

Untuk menangani perkara ini, adalah penting untuk mengelak daripada menggunakan nilai tetap untuk kiri atau kanan. Sebaliknya, pertimbangkan untuk menggunakan sifat transformasi bersama-sama dengan kiri atau kanan. Teknik ini akan menghalang sebarang kehilangan mengejut semasa animasi.

Berikut ialah coretan CSS yang dikemas kini yang menangani isu kehilangan:

<code class="css">@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate;
}</code>

Dalam kod yang dikemas kini ini, kami menggunakan translateX(-100%) dalam sifat transform untuk mengalihkan elemen 100% ke kiri, dengan itu mengelakkan sebarang kehilangan yang boleh dilihat. Ini memastikan pergerakan kiri-kanan yang lancar dan linear tanpa sebarang gangguan.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pergerakan Kiri-Kanan yang Lancar untuk Div ​​yang Diposisikan Benar-Benar dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!