Kesan peralihan CSS: bagaimana untuk mencapai kesan terjemahan, zum dan putaran unsur

Kesan peralihan CSS: Cara mencapai kesan terjemahan, zum dan putaran elemen

Kesan peralihan CSS ialah salah satu teknologi yang biasa digunakan dalam pembangunan web Atribut peralihan CSS boleh mencapai peralihan yang lancar daripada satu gaya kepada yang lain. Dalam artikel ini, kita akan belajar cara menggunakan kesan peralihan CSS untuk mencapai kesan terjemahan, penskalaan dan putaran elemen serta memberikan contoh kod yang sepadan.

1. Kesan terjemahan unsur
   Untuk mencapai kesan terjemahan unsur, kita boleh menggunakan atribut transformasi CSS bersama-sama dengan atribut peralihan. Sebagai contoh, kod berikut akan melaksanakan kesan butang yang diterjemahkan 100 piksel sepanjang Peralihan kepada keadaan akhir. Apabila elemen butang dilegar, gaya pseudo-selector :hover akan digunakan, menyebabkan elemen butang menterjemah 100 piksel di sepanjang paksi X.

Kesan penskalaan elemen

Untuk mencapai kesan penskalaan elemen, anda juga boleh menggunakan atribut transformasi dan atribut peralihan CSS. Kod berikut akan mencapai kesan imej mengecil kepada 50% daripada saiz asalnya apabila dilegar:

2. .btn {
     transition: transform 0.5s ease;
   }
   
   .btn:hover {
     transform: translateX(100px);
   }

   
   Dalam kod di atas, kami menambah kesan peralihan kepada elemen imej dan menghantarnya melalui pemilih kelas pseudo :hover . Gaya mengalihkan saiz elemen imej daripada keadaan awal kepada keadaan akhir, mencapai kesan mengecut.

Kesan putaran elemen

Untuk mencapai kesan putaran elemen, anda juga perlu menggunakan atribut transformasi dan atribut peralihan CSS. Kod berikut akan mencapai kesan teks berputar 45 darjah dari titik tengah apabila ia diklik:

3. .image {
     transition: transform 0.5s ease;
   }
   
   .image:hover {
     transform: scale(0.5);
   }

   
   Dalam kod di atas, kami menambah kesan peralihan pada elemen teks dan melepasi gaya pemilih kelas pseudo :hover Peralihan elemen teks daripada keadaan awal kepada keadaan akhir untuk mencapai kesan putaran.

Ringkasan:

Dengan menggunakan atribut peralihan dan atribut transformasi CSS, kami boleh mencapai kesan terjemahan, penskalaan dan putaran elemen dengan mudah. Menggunakan gaya :hover pseudo-selector, kita boleh mencetuskan kesan ini dalam keadaan tertentu. Kesan peralihan ini boleh menambah beberapa dinamik dan interaktiviti pada halaman web dan meningkatkan pengalaman pengguna.

Di atas ialah kaedah dan kod contoh tentang cara melaksanakan terjemahan, penskalaan dan kesan putaran unsur. Saya harap artikel ini dapat membantu anda mencapai kesan peralihan CSS.

Atas ialah kandungan terperinci Kesan peralihan CSS: bagaimana untuk mencapai kesan terjemahan, zum dan putaran unsur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!