Adam Argyle ' s Sick Mouse-Out Hover kesan

Melayari Codepen, saya tersandung pada kesan Hover CSS yang menawan oleh Adam Argyle. Rasa seperti aplikasi demo, terutamanya warna latar belakang yang lancar beralih dari kiri ke kanan dan kemudian keluar ke kiri ke kiri, segera menarik perhatian saya. Saya menghabiskan masa yang baik semasa mencipta semula, satu proses yang menyerlahkan penggunaan peralihan, perubahan, dan offset yang elegan.

Pendekatan awal saya memberi tumpuan kepada peralihan latar belakang, memanipulasi background-size dan background-position . Walau bagaimanapun, saya tidak dapat mencapai pergerakan dua arah yang dikehendaki.

Seterusnya, saya meneroka transformasi CSS. Walaupun scaleX() menawarkan potensi, memohon terus ke elemen pautan mengubah kandungan, hasil yang tidak diingini. Penyelesaiannya? Pseudo-element!

Inilah pelaksanaan saya:

Pertama, gaya asas:

 {
  Kedudukan: Relatif;
}

A :: Sebelum {
  Latar Belakang: #FF9800;
  Kandungan: "";
  inset: 0;
  Kedudukan: Mutlak;
  Transform: Scalex (0);
  Peralihan: Transform .5s mudah-dalam-keluar;
  Z -indeks: -1;
}

Ini mewujudkan elemen pseudo ( ::before ) dengan latar belakang oren, diposisikan dalam pautan. transform: scaleX(0); Pada mulanya menyembunyikannya, dan transition memastikan animasi yang lancar.

Kesan hover kemudian ditakrifkan:

 A: Hover :: Sebelum {
  Transform: Scalex (1);
  Transform-asal: betul;
}

Pada hover, scaleX(1) memperluaskan elemen pseudo, dan penting, transform-origin: right; Menetapkan titik pengembangan ke kanan. Ini adalah kunci kepada tingkah laku tetikus.

Keajaiban terletak pada interaksi transition dan perubahan dalam transform-origin . Peralihan lancar menghidupkan scaleX() dari 0 hingga 1 pada hover dan kembali lagi pada tetikus. Peralihan transform-origin dari left (lalai) ke right pada hover membalikkan arah animasi untuk kesan lancar, bidirectional. Pada mulanya, saya bergelut dengan ini, tetapi harta transform-origin terbukti menjadi sekeping yang hilang.

Terima kasih kepada Adam Argyle untuk inspirasi! Kesan ini menunjukkan kuasa teknik CSS mudah apabila digunakan secara kreatif.

Atas ialah kandungan terperinci Adam Argyle ' s Sick Mouse-Out Hover kesan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!