css untuk melaksanakan gelongsor

CSS ialah bahasa reka bentuk web yang biasa digunakan yang boleh digunakan untuk mencapai banyak kesan web. Antaranya, kesan gelongsor juga adalah satu yang sangat biasa. Berikut memperkenalkan beberapa kaedah CSS untuk mencapai kesan gelongsor.

1 Gunakan atribut transformasi

Gunakan atribut transformasi untuk mencapai terjemahan, putaran, penskalaan dan kesan lain. Antaranya, dalam animasi terjemahan, anda boleh menggunakan translateX() dan translateY() untuk mengawal pergerakan elemen mendatar dan menegak.

Kod sampel adalah seperti berikut:

<style>
  .box {
    background-color: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .5s ease;
  }

  .box:hover {
    transform: translateX(100px);
  }
</style>

<div class="box"></div>

Kod ini mencapai kesan mengalihkan 100px dari kedudukan asal ke kanan dengan kesan pelonggaran 0.5 saat apabila tetikus melayang di atas kotak . Antaranya, dalam kelas pseudo .box:hover, translateX() digunakan untuk mengawal terjemahan elemen pada paksi X.

2. Gunakan atribut animasi

Gunakan atribut animasi untuk mencapai animasi yang lebih kompleks, di mana kita boleh menetapkan bingkai utama dan mengawal kesan animasi unsur.

Kod sampel adalah seperti berikut:

<style>
  .box {
    background-color: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: slide 1s ease-in-out infinite alternate;
  }

  @keyframes slide {
    from {
      transform: translateX(0px);
    }
    to {
      transform: translateX(100px);
    }
  }
</style>

<div class="box"></div>

Kod ini mentakrifkan animasi yang dipanggil slaid untuk mencapai kesan kotak gelongsor dari kiri ke kanan. Antaranya, atribut animasi digunakan untuk mengkonfigurasi animasi, dan menetapkan kesan pelonggaran, main balik tak terhingga dan kecerunan ulang-alik. Dalam animasi slaid yang ditakrifkan oleh kata kunci @keyframes, kami mengawal keadaan awal dan keadaan akhir elemen melalui dari dan ke, dengan itu mencapai kesan gelongsor.

Ringkasan

Melalui sifat transformasi dan sifat animasi yang disediakan dalam CSS, kita boleh mencapai kesan gelongsor elemen dengan mudah. Dalam pembangunan sebenar, anda boleh memilih mengikut keperluan khusus untuk mencapai kesan terbaik dan pengalaman pengguna.

Atas ialah kandungan terperinci css untuk melaksanakan gelongsor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!