Kesan hover sejuk yang menggunakan sifat latar belakang

Beberapa ketika dahulu, Geoff menulis artikel mengenai kesan hover yang sejuk. Kesannya bergantung pada gabungan unsur-unsur pseudo, transformasi, dan peralihan CSS. Banyak komen telah menunjukkan bahawa kesan yang sama boleh dilakukan menggunakan sifat latar belakang. Geoff menyebut bahawa itu adalah pemikiran awalnya dan itulah yang saya fikirkan juga. Saya tidak mengatakan elemen pseudo yang dia mendarat adalah buruk, tetapi mengetahui kaedah yang berbeza untuk mencapai kesan yang sama hanya boleh menjadi perkara yang baik.

Siri kesan hover sejuk:

1. Cool Hover Effects That Use Background Properties ( you are here! )
2. Kesan hover sejuk yang menggunakan bayangan teks css
3. Kesan hover sejuk yang menggunakan keratan latar belakang, topeng, dan 3D

Dalam jawatan ini, kami akan membuat kerja semula kesannya, tetapi juga mengembangkannya ke dalam jenis kesan hover lain yang hanya menggunakan sifat latar belakang CSS.

Anda dapat melihat sifat latar belakang di tempat kerja dalam demo itu, serta bagaimana kita boleh menggunakan sifat tersuai dan fungsi calc () untuk melakukan lebih banyak lagi. Kami akan belajar bagaimana untuk menggabungkan semua ini supaya kami ditinggalkan dengan kod yang dioptimumkan dengan baik!

Hover kesan #1

Mari kita mulakan dengan kesan pertama yang merupakan pembiakan yang terperinci oleh Geoff dalam artikelnya. Kod yang digunakan untuk mencapai kesan itu adalah seperti berikut:

 .Hover-1 {
  Latar Belakang: Linear-Gradient (#1095C1 0 0) var (-p, 0) / var (-p, 0) tidak berulang;
  Peralihan: .4s, latar belakang kedudukan 0s;
}
.Hover-1: Hover {
  --P: 100%;
  Warna: #FFF;
}

Jika kita menghilangkan peralihan warna (yang pilihan), kita hanya memerlukan tiga perisytiharan CSS untuk mencapai kesannya. Anda mungkin terkejut betapa kecilnya kod itu, tetapi anda akan melihat bagaimana kami sampai di sana.

Pertama, mari kita mulakan dengan peralihan saiz latar belakang yang mudah:

Kami menghidupkan saiz kecerunan linear dari 0 100% hingga 100% 100%. Ini bermakna lebarnya dari 0 hingga 100% manakala latar belakang itu sendiri kekal pada ketinggian penuh. Tidak ada yang kompleks setakat ini.

Mari kita mulakan pengoptimuman kita. Kami mula -mula mengubah kecerunan kami untuk menggunakan warna sekali sahaja:

 Latar Belakang-imej: Linear-Gradient (#1095C1 0 0);

Sintaks mungkin kelihatan agak pelik, tetapi kami memberitahu penyemak imbas bahawa satu warna digunakan untuk dua warna berhenti, dan itu cukup untuk menentukan kecerunan dalam CSS. Kedua -dua warna berhenti adalah 0, jadi penyemak imbas secara automatik membuat 100% yang terakhir dan mengisi kecerunan kami dengan warna yang sama. Pintasan, ftw!

Dengan saiz latar belakang, kita boleh meninggalkan ketinggian kerana kecerunan adalah ketinggian penuh secara lalai. Kita boleh melakukan peralihan dari saiz latar belakang: 0 hingga saiz latar belakang: 100%.

 .Hover-1 {
  Latar Belakang-imej: Linear-Gradient (#1095C1 0 0);
  Latar Belakang: 0;
  Latar Belakang berulang: tidak berulang;
  Peralihan: .4s;
}
.Hover-1: Hover {
  Latar Belakang: 100%;
}

Mari memperkenalkan harta tersuai untuk mengelakkan pengulangan saiz latar belakang:

 .Hover-1 {
  Latar Belakang-imej: Linear-Gradient (#1095C1 0 0);
  saiz latar belakang: var (-p, 0%);
  Latar Belakang berulang: tidak berulang;
  Peralihan: .4s;
}
.Hover-1: Hover {
  --P: 100%;
}

Kami tidak menentukan --P pada mulanya, jadi nilai sandaran (0% dalam kes kami) akan digunakan. Pada hover, kami menentukan nilai yang menggantikan satu kejatuhan (100%).

Sekarang, mari menggabungkan semua sifat latar belakang menggunakan versi singkat untuk mendapatkan:

 .Hover-1 {
  Latar Belakang: Linear-Gradient (#1095C1 0 0) kiri / var (-p, 0%) tidak berulang;
  Peralihan: .4s;
}
.Hover-1: Hover {
  --P: 100%;
}

Kami semakin dekat! Perhatikan bahawa saya telah memperkenalkan nilai kiri (untuk kedudukan latar belakang) yang wajib apabila menentukan saiz di latar belakang. Plus, kita memerlukannya untuk mencapai kesan hover kita.

Kita juga perlu mengemas kini kedudukan pada hover. Kita boleh melakukannya dalam dua langkah:

1. Meningkatkan saiz dari kanan pada hover tetikus.
2. Kurangkan saiz dari kiri pada tetikus keluar.

Untuk melakukan ini, kita perlu mengemas kini kedudukan latar belakang pada hover juga:

Kami menambah dua perkara ke kod kami:

• Nilai kedudukan latar belakang yang betul semasa berlegar
• Peralihan Peralihan 0s di Latar Belakang Letakkan

Ini bermakna, pada hover, kami dengan serta-merta menukar kedudukan latar belakang dari kiri (lihat, kami memerlukan nilai itu!) Ke kanan supaya saiz latar belakang akan meningkat dari sebelah kanan. Kemudian, apabila kursor tetikus meninggalkan pautan, peralihan bermain secara terbalik, dari kanan ke kiri, menjadikannya kelihatan bahawa kita menurunkan saiz latar belakang dari sebelah kiri. Kesan hover kami dilakukan!

Tetapi anda berkata kami hanya memerlukan tiga perisytiharan dan terdapat empat.

Itu benar, tangkapan yang bagus. Nilai kiri dan kanan boleh ditukar kepada 0 0 dan 100% 0, masing -masing; Dan kerana kecerunan kita sudah ketinggian penuh secara lalai, kita boleh menggunakan 0 dan 100%.

 .Hover-1 {
  Latar Belakang: Linear-Gradient (#1095C1 0 0) 0 / var (-p, 0%) tidak berulang;
  Peralihan: .4s, latar belakang kedudukan 0s;
}
.Hover-1: Hover {
  --P: 100%;
  Latar Belakang: 100%;
}

Lihat bagaimana kedudukan latar belakang dan --P menggunakan nilai yang sama? Sekarang kita dapat mengurangkan kod ke tiga perisytiharan:

 .Hover-1 {
  Latar Belakang: Linear-Gradient (#1095C1 0 0) var (-p, 0%) / var (-p, 0%) tidak berulang;
  Peralihan: .4s, latar belakang kedudukan 0s;
}
.Hover-1: Hover {
  --P: 100%;
}

Hartanah tersuai --P menentukan kedua -dua kedudukan dan saiz latar belakang. Pada hover, ia akan mengemas kini kedua -dua mereka juga. Ini adalah kes penggunaan yang sempurna yang menunjukkan bagaimana sifat tersuai dapat membantu kami mengurangkan kod berlebihan dan mengelakkan penulisan sifat lebih dari satu kali. Kami menentukan tetapan kami menggunakan sifat tersuai dan kami hanya mengemas kini yang terakhir pada hover.

Tetapi kesan Geoff yang diterangkan melakukan sebaliknya, bermula dari kiri dan berakhir di sebelah kanan. Bagaimanakah kita melakukannya apabila kita tidak boleh bergantung pada pemboleh ubah yang sama?

Kami masih boleh menggunakan satu pembolehubah dan mengemas kini kod kami sedikit untuk mencapai kesan yang bertentangan. Apa yang kita mahukan ialah dari 100% hingga 0% dan bukannya 0% hingga 100%. Kami mempunyai perbezaan 100% yang dapat kami nyatakan menggunakan Calc (), seperti ini:

 .Hover-1 {
  Latar Belakang: Linear-Gradient (#1095C1 0 0) Calc (100%-var (-p, 0%)) / var (-p, 0%) no-repeat;
  Peralihan: .4s, latar belakang kedudukan 0s;
}
.Hover-1: Hover {
  --P: 100%;
}

--P akan berubah dari 0% hingga 100%, tetapi kedudukan latar belakang akan berubah dari 100% hingga 0%, terima kasih kepada Calc ().

Kami masih mempunyai tiga deklarasi dan satu harta tersuai, tetapi kesan yang berbeza.

Sebelum kita berpindah ke kesan hover seterusnya, saya ingin menyerlahkan sesuatu yang penting yang mungkin anda perhatikan. Apabila berurusan dengan sifat tersuai, saya menggunakan 0% (dengan unit) dan bukannya unit yang kurang 0. Unit-unit sifar mungkin berfungsi apabila harta tersuai bersendirian, tetapi akan gagal di dalam Calc () di mana kita perlu secara jelas menentukan unit tersebut. Saya mungkin memerlukan artikel lain untuk menerangkan quirk ini tetapi sentiasa ingat untuk menambah unit apabila berurusan dengan sifat tersuai. Saya mempunyai dua jawapan di StackOverflow (di sini dan di sini) yang lebih terperinci.

Hover Effect #2

Kami memerlukan peralihan yang lebih kompleks untuk kesan ini. Mari kita lihat ilustrasi langkah demi langkah untuk memahami apa yang sedang berlaku.

Kami mula-mula mempunyai peralihan kedudukan latar belakang yang diikuti oleh saiz latar belakang. Mari menterjemahkannya ke dalam kod:

 .Hover-2 {
  Latar Belakang-imej: Linear-Gradient (#1095C1 0 0);
  Latar Belakang: 100% .08EM; /* .08EM adalah ketinggian tetap kami; Ubah suai seperti yang diperlukan. */
  Latar Belakang-kedudukan: /* ??? */;
  Latar Belakang berulang: tidak berulang;
  Peralihan: Latar Belakang .3s, Latar Belakang-kedudukan .3s .3s;
}
.Hover-2: Hover {
  Peralihan: Latar Belakang .3s .3s, Latar Belakang-kedudukan .3s;
  Latar Belakang: 100% 100%;
  Latar Belakang-kedudukan: /* ??? */;
}

Perhatikan penggunaan dua nilai peralihan. Pada hover, kita perlu terlebih dahulu menukar kedudukan dan kemudian saiznya, itulah sebabnya kita menambah kelewatan ke saiz. Pada tetikus keluar, kami melakukan sebaliknya.

Persoalannya sekarang ialah: Nilai apa yang kita gunakan untuk kedudukan latar belakang? Kami meninggalkan mereka yang kosong di atas. Nilai saiz latar belakang adalah remeh, tetapi yang untuk kedudukan latar belakang tidak. Dan jika kita menyimpan konfigurasi sebenar, kita tidak dapat menggerakkan kecerunan kita.

Kecerunan kami mempunyai lebar yang sama dengan 100%, jadi kami tidak boleh menggunakan nilai peratusan pada kedudukan latar belakang untuk memindahkannya.

Nilai peratusan yang digunakan dengan kedudukan latar belakang selalu menjadi kesakitan terutama apabila anda menggunakannya untuk kali pertama. Tingkah laku mereka tidak intuitif tetapi jelas dan mudah difahami jika kita mendapat logik di belakangnya. Saya fikir ia akan mengambil artikel lain untuk penjelasan penuh mengapa ia berfungsi dengan cara ini, tetapi inilah penjelasan "panjang" yang saya hantar di Stack Overflow. Saya cadangkan mengambil beberapa minit untuk membaca jawapan itu dan anda akan berterima kasih kepada saya kemudian!

Caranya adalah untuk mengubah lebar kepada sesuatu yang berbeza daripada 100%. Mari kita gunakan 200%. Kami tidak bimbang tentang latar belakang yang melebihi elemen kerana limpahan itu tersembunyi.

 .Hover-2 {
  Latar Belakang-imej: Linear-Gradient (#1095C1 0 0);
  Latar Belakang: 200% .08EM;
  Latar belakang kedudukan: 200% 100%;
  Latar Belakang berulang: tidak berulang;
  Peralihan: Latar Belakang .3s, Latar Belakang-kedudukan .3s .3s;
}
.Hover-2: Hover {
  Peralihan: Latar Belakang .3s .3s, Latar Belakang-kedudukan .3s;
  Latar Belakang: 200% 100%;
  Latar belakang kedudukan: 100% 100%;
}

Dan inilah yang kita dapat:

Sudah tiba masanya untuk mengoptimumkan kod kami. Jika kita mengambil idea yang kita pelajari dari kesan hover pertama, kita boleh menggunakan sifat -sifat tersendiri dan menulis pengisytiharan yang lebih sedikit untuk membuat kerja ini:

 .Hover-2 {
  Latar Belakang: 
    Linear-Gradient (#1095C1 0 0) NO Repeat
    var (-p, 200%) 100% / 200% var (-p, .08EM);
  Peralihan: .3s var (-t, 0s), kedudukan latar belakang .3s calc (.3s-var (-t, 0s));
}
.Hover-2: Hover {
  --P: 100%;
  --t: .3s;
}

Kami menambah semua sifat latar belakang bersama -sama menggunakan versi Shorthand kemudian kami menggunakan --P untuk menyatakan nilai kami. Saiz berubah dari .08EM hingga 100% dan kedudukan dari 200% hingga 100%

Saya juga menggunakan pembolehubah lain --T, untuk mengoptimumkan harta peralihan. Pada hover tetikus kita menetapkannya kepada nilai .3s, yang memberi kita ini:

 Peralihan: .3s .3s, Latar Belakang-kedudukan .3s 0s;

Pada tetikus keluar, -tidak ditentukan, jadi nilai sandaran akan digunakan:

 Peralihan: .3s 0s, latar belakang-kedudukan .3s .3s;

Tidakkah kita mempunyai saiz latar belakang dalam peralihan?

Itulah satu lagi pengoptimuman yang boleh kita buat. Jika kita tidak menentukan apa-apa harta, ia bermaksud "semua" sifat, jadi peralihan ditakrifkan untuk "semua" sifat-sifat (termasuk latar belakang dan latar belakang kedudukan). Kemudian ia ditakrifkan semula untuk kedudukan latar belakang yang sama dengan mendefinisikannya untuk saiz latar belakang, kemudian kedudukan latar belakang.

"Sama" adalah berbeza daripada mengatakan sesuatu adalah "sama." Anda akan melihat perbezaan jika anda menukar lebih banyak sifat pada hover, jadi pengoptimuman terakhir mungkin tidak sesuai dalam beberapa kes.

Bolehkah kita masih mengoptimumkan kod dan menggunakan hanya satu harta tersuai?

Ya, kita boleh! Ana Tudor berkongsi artikel hebat yang menerangkan cara membuat penukaran kering di mana satu harta tersuai boleh mengemas kini pelbagai sifat. Saya tidak akan masuk ke butiran di sini, tetapi kod kami boleh disemak semula seperti ini:

 .Hover-2 {
  Latar Belakang: 
    Linear-Gradient (#1095C1 0 0) NO Repeat
    Calc (200%-var (-i, 0) * 100%) 100% / 200% calc (100% * var (-i, 0) .08EM);
  Peralihan: .3s calc (var (-i, 0) * .3s), latar belakang-kedudukan .3s calc (.3s-calc (var (-i, 0) * .3s));
}
.Hover-2: Hover {
  --i: 1;
}

Hartanah adat -pada mulanya tidak ditentukan, jadi nilai sandaran, 0, digunakan. Pada hover walaupun, kami menggantikan 0 dengan 1. Anda boleh melakukan matematik untuk kedua -dua kes dan mendapatkan nilai untuk setiap satu. Anda dapat melihat pembolehubah itu sebagai "suis" yang mengemas kini semua nilai kami sekaligus pada hover.

Sekali lagi, kami kembali kepada hanya tiga perisytiharan untuk kesan hover yang cukup sejuk!

Hover effect #3

Kami akan menggunakan dua kecerunan dan bukannya satu untuk kesan ini. Kami akan melihat bahawa menggabungkan pelbagai kecerunan adalah satu lagi cara untuk mewujudkan kesan hover mewah.

Inilah gambarajah apa yang kita lakukan:

Inilah caranya dalam CSS:

 .Hover-3 {
  imej latar belakang:
    Linear-Gradient (#1095C1 0 0),
    Linear-Gradient (#1095C1 0 0);
  Latar Belakang berulang: tidak berulang;
  Latar Belakang: 50% .08EM;
  Latar Belakang:
    -100% 100%,
    200% 0;
  Peralihan: Latar Belakang .3s, Latar Belakang-kedudukan .3s .3s;
}
.Hover-3: Hover {
  Latar Belakang: 50% 100%;
  Latar Belakang:
    0 100%,
    100% 0;  
  Peralihan: Latar Belakang .3s .3s, Latar Belakang-kedudukan .3s;
}

Kod ini hampir sama dengan kesan hover yang lain yang telah kami tutupi. Satu -satunya perbezaan ialah kita mempunyai dua kecerunan dengan dua kedudukan yang berbeza. Nilai kedudukan mungkin kelihatan pelik tetapi, sekali lagi, itu berkaitan dengan bagaimana peratusan berfungsi dengan harta latar belakang di CSS, jadi saya sangat mengesyorkan membaca jawapan limpahan stack saya jika anda ingin masuk ke dalam butiran yang cerah.

Sekarang mari kita mengoptimumkan! Anda mendapat idea sekarang - kami menggunakan sifat -sifat tersendiri, sifat tersuai, dan calc () untuk merapikan perkara.

 .Hover-3 {
  --C: No-Repeat Linear-Gradient (#1095C1 0 0);
  Latar Belakang: 
    var (-c) calc (-100% var (-p, 0%)) 100% / 50% var (-p, .08em),
    var (-c) calc (200%-var (-p, 0%)) 0/50% var (-p, .08EM);
  Peralihan: .3s var (-t, 0s), kedudukan latar belakang .3s calc (.3s-var (-t, 0s));
}
.Hover-3: Hover {
  --P: 100%;
  --t: 0.3s;
}

Saya telah menambah harta tersuai tambahan, --c, yang mentakrifkan kecerunan sejak kecerunan yang sama digunakan di kedua -dua tempat.

Saya menggunakan 50.1% dalam demo itu dan bukannya 50% untuk saiz latar belakang kerana ia menghalang jurang dari menunjukkan antara kecerunan. Saya juga menambah 1% kepada kedudukan atas sebab yang sama.

Mari kita lakukan pengoptimuman kedua dengan menggunakan pemboleh ubah suis:

 .Hover-3 {
  --C: No-Repeat Linear-Gradient (#1095C1 0 0);
  Latar Belakang: 
    var (-c) calc (-100% var (-i, 0) * 100%) 100% / 50% calc (100% * var (-i, 0) .08em),
    var (-c) calc (200%-var (-i, 0) * 100%) 0/50% calc (100% * var (-i, 0) .08EM);
  Peralihan: .3s calc (var (-i, 0) * .3s), latar belakang-kedudukan .3s calc (.3s-var (-i, 0) * .3s);
}
.Hover-3: Hover {
  --i: 1;
}

Adakah anda mula melihat corak di sini? Ia tidak begitu banyak kesan yang kami buat adalah sukar. Ia lebih "langkah akhir" pengoptimuman kod. Kami mulakan dengan menulis kod verbose dengan banyak sifat, kemudian mengurangkannya mengikut peraturan mudah (misalnya menggunakan sworthand, mengeluarkan nilai lalai, mengelakkan nilai berlebihan, dll) untuk memudahkan perkara -perkara yang mungkin sebanyak mungkin.

Hover Effect #4

Saya akan meningkatkan tahap kesukaran untuk kesan terakhir ini, tetapi anda tahu cukup dari contoh -contoh lain yang saya ragu -ragu anda akan mempunyai masalah dengan yang satu ini.

Kesan hover ini bergantung kepada dua kecerunan konik dan lebih banyak pengiraan.

Pada mulanya, kami mempunyai kedua -dua kecerunan dengan dimensi sifar dalam langkah 1. Kami meningkatkan saiz setiap satu dalam langkah 2. Kami terus meningkatkan lebar mereka sehingga mereka menutup sepenuhnya elemen, seperti yang ditunjukkan dalam langkah 3. Selepas itu, kami meluncur ke bawah untuk mengemas kini kedudukan mereka. Ini adalah bahagian "sihir" dari kesan hover. Oleh kerana kedua -dua kecerunan akan menggunakan pewarnaan yang sama, menukar kedudukan mereka dalam langkah 4 tidak akan membuat perbezaan visual - tetapi kita akan melihat perbezaan apabila kita mengurangkan saiz pada tetikus keluar semasa langkah 5.

Jika anda membandingkan Langkah 2 dan Langkah 5, anda dapat melihat bahawa kami mempunyai kecenderungan yang berbeza. Mari menterjemahkannya ke dalam kod:

 .Hover-4 {
  imej latar belakang:
    Conic-Gradient (/ * ??? */),,
    conic-gradient (/ * ??? */);
  Latar Belakang:
    0 0,
    100% 0;
  Latar Belakang: 0% 200%;
  Latar Belakang berulang: tidak berulang;
  Peralihan: Latar Belakang .4s, Latar Belakang-kedudukan 0s;
}
.Hover-4: Hover {
  Latar Belakang: /* ??? */ 200%;
  Latar Belakang:
    0 100%,
    100% 100%;
}

Kedudukannya cukup jelas. Satu kecerunan bermula di kiri atas (0 0) dan berakhir di kiri bawah (0 100%) manakala yang lain bermula di sebelah kanan atas (100% 0) dan berakhir di bahagian bawah kanan (100% 100%).

Kami menggunakan peralihan pada kedudukan latar belakang dan saiz untuk mendedahkannya. Kami hanya memerlukan nilai peralihan untuk saiz latar belakang. Dan seperti sebelum ini, kedudukan latar belakang perlu berubah dengan serta-merta, jadi kami memberikan nilai 0S untuk tempoh peralihan.

Untuk saiz, kedua -dua kecerunan perlu mempunyai 0 lebar dan dua kali ketinggian elemen (0% 200%). Kami akan melihat kemudian bagaimana saiz mereka berubah pada hover. Mari kita mula -mula menentukan konfigurasi kecerunan.

Rajah di bawah menggambarkan konfigurasi setiap kecerunan:

Perhatikan bahawa untuk kecerunan kedua (ditunjukkan dalam hijau), kita perlu tahu ketinggian untuk menggunakannya di dalam gradien conic yang kita buat. Atas sebab ini, saya akan menambah ketinggian garis yang menetapkan ketinggian elemen dan kemudian cuba nilai yang sama untuk nilai kecerunan konik yang kami tinggalkan.

 .Hover-4 {
  --c: #1095C1;
  Talian ketinggian: 1.2EM;
  imej latar belakang:
    Conic-Gradient (dari -135deg pada 100% 50%, var (-c) 90deg, #0000 0),
    conic-gradient (dari -135deg pada 1.2EM 50%, #0000 90DEG, var (-c) 0);
  Latar Belakang:
    0 0,
    100% 0;
  Latar Belakang: 0% 200%;
  Latar Belakang berulang: tidak berulang;
  Peralihan: Latar Belakang .4s, Latar Belakang-kedudukan 0s;
}
.Hover-4: Hover {
  Latar Belakang: /* ??? */ 200%;
  Latar Belakang:
    0 100%,
    100% 100%;
}

Perkara terakhir yang kami tinggalkan adalah untuk mengetahui saiz latar belakang. Secara intuitif, kita mungkin berfikir bahawa setiap kecerunan perlu mengambil separuh daripada lebar elemen tetapi itu sebenarnya tidak mencukupi.

We get a gap equal to the height, so we actually need to do is increase the size of each gradient by half the height on hover for them to cover the whole element.

 .Hover-4: Hover {
  Latar Belakang: Calc (50% .6EM) 200%;
  Latar Belakang:
    0 100%,
    100% 100%;
}

Inilah yang kita dapat setelah mengoptimumkannya seperti contoh sebelumnya:

 .Hover-4 {
  --c: #1095C1;
  Talian ketinggian: 1.2EM;
  Latar Belakang:
    Conic-Gradient (dari -135deg pada 100% 50%, var (-c) 90deg, #0000 0) 
      0 var (-p, 0%) / var (-s, 0%) 200%tidak berulang,
    Conic-Gradient (dari -135deg pada 1.2EM 50%, #0000 90deg, var (-c) 0) 
      100% var (-p, 0%) / var (-s, 0%) 200% tidak berulang;
  Peralihan: .4s, latar belakang kedudukan 0s;
}
.Hover-4: Hover {
  --P: 100%;
  --s: calc (50% .6EM);
}

Bagaimana dengan versi dengan hanya satu harta tersuai?

Saya akan meninggalkannya untuk anda! Selepas melihat empat kesan hover yang sama, anda sepatutnya dapat mendapatkan pengoptimuman akhir ke satu harta tersuai. Kongsi kerja anda di bahagian komen! Tidak ada hadiah, tetapi kami mungkin mempunyai pelaksanaan dan idea yang berbeza yang memberi manfaat kepada semua orang!

Sebelum kita berakhir, izinkan saya berkongsi versi kesan hover terakhir yang dimasak oleh Ana Tudor. Ia adalah peningkatan! Tetapi ambil perhatian bahawa ia tidak mempunyai sokongan Firefox kerana bug yang diketahui. Namun, ini adalah idea yang bagus yang menunjukkan cara menggabungkan kecerunan dengan mod campuran untuk menghasilkan kesan hover yang lebih sejuk.

Membungkus

Kami membuat empat kesan hover super sejuk! Dan walaupun mereka adalah kesan yang berbeza, mereka semua mengambil pendekatan yang sama menggunakan sifat latar belakang CSS, sifat tersuai, dan Calc (). Kombinasi yang berbeza membolehkan kami membuat versi yang berbeza, semuanya menggunakan teknik yang sama yang meninggalkan kami dengan kod yang bersih dan dikekalkan.

Jika anda ingin mendapatkan beberapa idea, saya membuat koleksi 500 (ya, 500!) Kesan hover, 400 daripadanya dilakukan tanpa unsur-unsur pseudo. Keempat yang kami tutupi dalam artikel ini hanyalah hujung gunung es!

Atas ialah kandungan terperinci Kesan hover sejuk yang menggunakan sifat latar belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!