Kesan hover CSS sejuk yang menggunakan kliping latar belakang, topeng, dan 3D

Kami telah berjalan melalui satu siri jawatan sekarang mengenai pendekatan yang menarik untuk kesan hover CSS. Kami bermula dengan sekumpulan contoh yang menggunakan sifat latar belakang CSS, kemudian berpindah ke harta bayang-bayang teks di mana kami secara teknikal tidak menggunakan bayang-bayang. Kami juga menggabungkannya dengan pembolehubah CSS dan Calc () untuk mengoptimumkan kod dan memudahkannya untuk diurus.

Dalam artikel ini, kami akan membina kedua -dua artikel tersebut untuk mewujudkan animasi CSS yang lebih kompleks. Kami bercakap tentang keratan latar belakang, topeng CSS, dan bahkan mendapat kaki kami basah dengan perspektif 3D. Dalam erti kata lain, kita akan meneroka teknik lanjutan kali ini dan menolak had apa yang boleh dilakukan CSS dengan kesan hover!

Siri kesan hover sejuk:

1. Kesan hover sejuk yang menggunakan sifat latar belakang
2. Kesan hover sejuk yang menggunakan teks CSS
3. Kesan hover sejuk yang menggunakan keratan latar belakang, topeng, dan 3D ( anda di sini! )

Inilah rasa apa yang kita buat:

Hover kesan menggunakan klip latar belakang

Mari bercakap mengenai klip latar belakang. Harta CSS ini menerima nilai kata kunci teks yang membolehkan kita memohon kecerunan pada teks elemen dan bukannya latar belakang sebenar.

Jadi, sebagai contoh, kita boleh mengubah warna teks pada hover kerana kita akan menggunakan harta warna, tetapi dengan cara ini kita menghidupkan perubahan warna:

Apa yang saya lakukan ialah menambah klip latar belakang: teks ke elemen dan peralihan kedudukan latar belakang. Tidak perlu lebih rumit daripada itu!

Tetapi kita boleh melakukan lebih baik jika kita menggabungkan pelbagai kecerunan dengan nilai keratan latar belakang yang berbeza.

Dalam contoh itu, saya menggunakan dua kecerunan yang berbeza dan dua nilai dengan klip latar belakang. Kecerunan latar belakang pertama dipotong ke teks (terima kasih kepada nilai teks) untuk menetapkan warna pada hover, sementara kecerunan latar belakang kedua mencipta garis bawah bawah (terima kasih kepada nilai kotak padding). Segala -galanya lurus disalin dari kerja yang kami lakukan dalam artikel pertama siri ini.

Bagaimana dengan kesan hover di mana bar slaid dari atas ke bawah dengan cara yang kelihatan seperti teks diimbas, kemudian berwarna dalam:

Kali ini saya menukar saiz kecerunan pertama untuk membuat garis. Kemudian saya meluncur dengan kecerunan lain yang mengemas kini warna teks untuk mencipta ilusi! Anda boleh memvisualisasikan apa yang berlaku dalam pen ini:

Kami hanya menggaruk permukaan apa yang boleh kita lakukan dengan kuasa-kuasa latar belakang kita! Walau bagaimanapun, teknik ini mungkin sesuatu yang anda ingin mengelakkan menggunakan dalam pengeluaran, kerana Firefox diketahui mempunyai banyak bug yang dilaporkan yang berkaitan dengan klip latar belakang. Safari mempunyai masalah sokongan juga. Itu hanya meninggalkan Chrome dengan sokongan pepejal untuk perkara ini, jadi mungkin ia terbuka seperti yang kita teruskan.

Mari beralih ke kesan hover yang lain menggunakan klip latar belakang:

Anda mungkin berfikir ini kelihatan sangat mudah berbanding dengan apa yang baru saja kami tutupi - dan anda betul, tidak ada yang mewah di sini. Apa yang saya lakukan ialah meluncur satu kecerunan sambil meningkatkan saiz yang lain.

Tetapi kita di sini untuk melihat kesan hover maju, bukan? Mari kita ubah sedikit supaya animasi berbeza apabila kursor tetikus meninggalkan elemen. Kesan hover yang sama, tetapi yang berbeza berakhir dengan animasi:

Sejuk kan? Mari membedah kod:

 .Hover {
  --c: #1095C1; / * warna */

  Warna: #0000;
  Latar Belakang: 
    Linear-Gradient (90Deg, #FFF 50%, var (-c) 0) Calc (100%-var (--_ p, 0%)) / 200%, 
    Linear-Gradient (var (-c) 0 0) 0% 100% / var (--_ p, 0%) tidak berulang,
    var (--_ c, #0000);
  -WebKit-Background-Clip: Teks, Kotak Padding, Padding-Box;
          Klip latar belakang: teks, kotak padding, kotak padding;
  Peralihan: 0s, warna .5s, latar belakang warna .5s;
}
.Hover: hover {
  Warna: #FFF;
  --_ c: var (-c);
  --_ P: 100%;
  Peralihan: 0.5s, warna 0s .5s, latar belakang warna 0s .5s;
}

Kami mempunyai tiga lapisan latar belakang-dua kecerunan dan warna latar belakang yang ditakrifkan menggunakan pembolehubah --_ C yang pada mulanya ditetapkan kepada telus (#0000). Pada hover, kita menukar warna menjadi putih dan pembolehubah-C warna utama (--c).

Inilah yang berlaku pada peralihan itu: Pertama, kita menggunakan peralihan kepada segala-galanya tetapi kita melambatkan warna dan warna latar belakang dengan 0.5s untuk membuat kesan gelongsor. Selepas itu, kita menukar warna dan warna latar belakang. Anda mungkin tidak melihat perubahan visual kerana teks sudah putih (terima kasih kepada kecerunan pertama) dan latar belakang sudah ditetapkan pada warna utama (terima kasih kepada kecerunan kedua).

Kemudian, pada tetikus keluar, kami menggunakan perubahan segera kepada segala-galanya (perhatikan kelewatan 0s), kecuali warna dan warna latar belakang yang mempunyai peralihan. Ini bermakna kita meletakkan semua kecerunan kembali ke negeri awal mereka. Sekali lagi, anda mungkin akan melihat tiada perubahan visual kerana warna teks dan warna latar belakang sudah berubah pada hover.

Akhir sekali, kami memohon pudar warna dan warna latar belakang untuk membuat bahagian tikus dari animasi. Saya tahu, mungkin sukar untuk dipahami tetapi anda boleh memvisualisasikan helah dengan lebih baik dengan menggunakan warna yang berbeza:

Hover di atas banyak kali dan anda akan melihat sifat -sifat yang menghidupkan pada hover dan yang menghidupkan pada tetikus. Anda kemudian dapat memahami bagaimana kami mencapai dua animasi yang berbeza untuk kesan hover yang sama.

Jangan lupa teknik pensuisan kering yang kami gunakan dalam artikel sebelumnya dalam siri ini untuk membantu mengurangkan jumlah kod dengan menggunakan hanya satu pembolehubah untuk suis:

 .Hover {
  --c: 16 149 193; / * warna menggunakan format RGB */

  Warna: RGB (255 255 255 / var (--_ i, 0));
  Latar Belakang:
    / * Gradien #1 */
    Linear-Gradient (90Deg, #FFF 50%, RGB (var (-c)) 0) Calc (100%-var (--_ i, 0) * 100%) / 200%,
    / * Gradien #2 */
    Linear-Gradient (RGB (Var (-C)) 0 0) 0% 100% / Calc (var (--_ i, 0) * 100%) Tidak berulang,
    / * Warna latar */
    rgb (var (-c)/ var (--_ i, 0));
  -WebKit-Background-Clip: Teks, Kotak Padding, Padding-Box;
          Klip latar belakang: teks, kotak padding, kotak padding;
  --_ t: calc (var (--_ i, 0)*. 5s);
  Peralihan: 
    var (--_ t),
    warna calc (.5s-var (--_ t)) var (--_ t),
    latar belakang warna calc (.5s-var (--_ t)) var (--_ t);
}
.Hover: hover {
  --_ i: 1;
}

Jika anda tertanya -tanya mengapa saya mencapai sintaks RGB untuk warna utama, itu kerana saya perlu bermain dengan ketelusan alfa. Saya juga menggunakan pembolehubah --_ t untuk mengurangkan pengiraan berlebihan yang digunakan dalam harta peralihan.

Sebelum kita berpindah ke bahagian seterusnya, terdapat lebih banyak contoh kesan hover yang saya lakukan beberapa ketika dahulu yang bergantung pada klip latar belakang. Ia akan terlalu lama untuk memperincikan setiap satu tetapi dengan apa yang telah kita pelajari setakat ini, anda dapat dengan mudah memahami kod tersebut. Ia boleh menjadi inspirasi yang baik untuk mencuba sebahagian daripada mereka sendiri tanpa melihat kod tersebut.

Saya tahu, saya tahu. Ini adalah kesan yang gila dan tidak biasa dan saya menyedari bahawa mereka terlalu banyak dalam kebanyakan situasi. Tetapi ini adalah cara untuk mengamalkan dan mempelajari CSS. Ingat, kami menolak had kesan hover CSS. Kesan hover mungkin menjadi sesuatu yang baru, tetapi kami mempelajari teknik -teknik baru di sepanjang jalan yang pasti boleh digunakan untuk perkara lain.

Hover kesan menggunakan topeng CSS

Tebak apa? Harta topeng CSS menggunakan kecerunan dengan cara yang sama dengan harta latar belakang, jadi anda akan melihat bahawa apa yang kami buat seterusnya adalah cukup mudah.

Mari kita mulakan dengan membina garis bawah mewah.

Saya menggunakan latar belakang untuk membuat sempadan bawah zig-zag dalam demo itu. Sekiranya saya mahu memohon animasi untuk garis bawah, ia akan membosankan untuk melakukannya menggunakan sifat latar belakang sahaja.

Masukkan topeng CSS.

Kod ini mungkin kelihatan pelik tetapi logiknya masih sama seperti yang kita lakukan dengan semua animasi latar belakang sebelumnya. Topeng terdiri daripada dua kecerunan. Kecerunan pertama ditakrifkan dengan warna legap yang meliputi kawasan kandungan (terima kasih kepada nilai kotak kandungan). Kecerunan pertama menjadikan teks itu kelihatan dan menyembunyikan sempadan zig-zag bawah. Kotak kandungan adalah nilai klip topeng yang berkelakuan sama dengan klip latar belakang

 Linear-Gradient (#000 0 0) Kotak Kandungan

Kecerunan kedua akan meliputi seluruh kawasan (terima kasih kepada kotak padding). Ini mempunyai lebar yang ditakrifkan menggunakan pembolehubah --_ P, dan ia akan diletakkan di sebelah kiri elemen.

 Linear-Gradient (#000 0 0) 0 / var (--_ p, 0%) Kotak padding

Sekarang, apa yang perlu kita lakukan ialah menukar nilai -P pada hover untuk membuat kesan gelongsor untuk kecerunan kedua dan mendedahkan garis bawah.

 .Hover: hover {
  --_ P: 100%;
  warna: var (-c);
}

Demo berikut menggunakan dengan lapisan topeng sebagai latar belakang untuk melihat lebih baik tipu muslihat. Bayangkan bahawa bahagian hijau dan merah adalah bahagian yang kelihatan dari elemen sementara segala -galanya adalah telus. Itulah yang akan dilakukan oleh topeng jika kita menggunakan kecerunan yang sama dengannya.

Dengan helah sedemikian, kita dapat dengan mudah membuat banyak variasi dengan hanya menggunakan konfigurasi kecerunan yang berbeza dengan harta topeng:

Setiap contoh dalam demo itu menggunakan konfigurasi kecerunan yang sedikit berbeza untuk topeng. Perhatikan juga, pemisahan dalam kod antara konfigurasi latar belakang dan konfigurasi topeng. Mereka boleh diuruskan dan dikekalkan secara bebas.

Mari kita ubah konfigurasi latar belakang dengan menggantikan garis zig-zag dengan garis bawah bergelombang sebaliknya:

Satu lagi koleksi kesan hover! Saya menyimpan semua konfigurasi topeng dan mengubah latar belakang untuk membuat bentuk yang berbeza. Sekarang, anda dapat memahami bagaimana saya dapat mencapai 400 kesan hover tanpa unsur-unsur pseudo-dan kita masih boleh mempunyai lebih banyak lagi!

Seperti, mengapa tidak seperti ini:

Berikut adalah cabaran untuk anda: sempadan dalam demo terakhir adalah kecerunan menggunakan harta topeng untuk mendedahkannya. Bolehkah anda mengetahui logik di belakang animasi? Ia mungkin kelihatan kompleks pada pandangan pertama, tetapi ia sama seperti logik yang kita lihat untuk kebanyakan kesan hover lain yang bergantung kepada kecerunan. Hantarkan penjelasan anda dalam komen!

Hover kesan dalam 3D

Anda mungkin berfikir bahawa mustahil untuk membuat kesan 3D dengan satu elemen (dan tanpa menggunakan unsur-unsur pseudo!) Tetapi CSS mempunyai cara untuk mewujudkannya.

Apa yang anda lihat tidak ada kesan 3D yang sebenar, melainkan ilusi sempurna 3D dalam ruang 2D yang menggabungkan latar belakang CSS, klip-laluan, dan mengubah sifat.

Perkara pertama yang kita lakukan ialah menentukan pembolehubah kita:

 --c: #1095C1; / * warna */
--b: .1em; / * panjang sempadan */
--d: 20px; / * kedalaman kiub */

Kemudian kami membuat sempadan telus dengan lebar yang menggunakan pembolehubah di atas:

 --_ s: calc (var (-d) var (-b));
warna: var (-c);
Sempadan: pepejal #0000; / * Nilai keempat menetapkan alpha warna */
lebar sempadan: var (-b) var (-b) var (--_ s) var (--_ s);

Bahagian atas dan kanan unsur kedua -duanya perlu sama dengan nilai -b manakala bahagian bawah dan kiri perlu sama dengan jumlah - -b dan - -(yang merupakan pembolehubah --_ s).

Untuk bahagian kedua helah ini, kita perlu menentukan satu kecerunan yang meliputi semua kawasan sempadan yang telah kami tentukan sebelumnya. Gradien conic akan berfungsi untuk itu:

 Latar Belakang: Conic-Gradient (
  di kiri var (--_ s) var bawah (--_ s),
  #0000 90deg, var (-c) 0
 ) 
 0 100% / calc (100%-var (-b)) calc (100%-var (-b)) kotak sempadan;

Kami menambah kecerunan lain untuk bahagian ketiga silap mata. Ini akan menggunakan dua nilai warna putih separa telus yang bertindih dengan kecerunan sebelumnya untuk mencipta warna yang berbeza dari warna utama, memberikan kita ilusi teduhan dan kedalaman.

 Conic-Gradient (
  di kiri var (-d) var bawah (-d),
  #0000 90deg,
  RGB (255 255 255 / 0.3) 0 225DEG,
  RGB (255 255 255 / 0.6) 0
) kotak sempadan

Langkah terakhir adalah untuk memohon laluan klip CSS untuk memotong sudut-sudut untuk rasa bayang-bayang yang panjang itu:

 Klip-Laluan: Polygon (
  0% var (-d), 
  var (-d) 0%, 
  100% 0%, 
  100% Calc (100%-var (-D)), 
  calc (100%-var (-d)) 100%, 
  0% 100%
)

Itu sahaja! Kami hanya membuat segi empat tepat 3D dengan apa-apa tetapi dua kecerunan dan laluan klip yang kami dapat dengan mudah menyesuaikan menggunakan pembolehubah CSS. Sekarang, yang perlu kita lakukan ialah menghidupkannya!

Perhatikan koordinat dari angka sebelumnya (ditunjukkan dalam warna merah). Mari kita kemas kini mereka untuk membuat animasi:

 Klip-Laluan: Polygon (
  0% var (-d), / * membalikkan var (-d) 0% * /
  var (-d) 0%, 
  100% 0%, 
  100% Calc (100%-var (-D)), 
  calc (100%-var (-d)) 100%, / * membalikkan 100% calc (100%-var (-d)) * / 
  0% 100% / * membalikkan var (-d) calc (100%-var (-d)) * /
)

Caranya adalah untuk menyembunyikan bahagian bawah dan kiri elemen supaya semua yang tersisa adalah elemen segi empat tepat tanpa kedalaman apa pun.

Pen ini mengasingkan bahagian klip-laluan animasi untuk melihat apa yang dilakukannya:

Sentuhan terakhir adalah untuk menggerakkan elemen ke arah yang bertentangan menggunakan Terjemahan - dan ilusi adalah sempurna! Inilah kesan menggunakan nilai harta tersuai yang berbeza untuk pelbagai kedalaman:

Kesan hover kedua mengikuti struktur yang sama. Apa yang saya lakukan ialah mengemas kini beberapa nilai untuk membuat pergerakan kiri atas dan bukannya kanan atas.

Menggabungkan kesan!

Perkara yang mengagumkan tentang semua yang telah kami sampaikan ialah mereka semua saling melengkapi. Berikut adalah contoh di mana saya menambah kesan teks-bayang-bayang dari artikel kedua dalam siri ini ke teknik animasi latar belakang dari artikel pertama semasa menggunakan helah 3D yang hanya dilindungi:

Kod sebenar mungkin mengelirukan pada mulanya, tetapi teruskan dan membedahnya sedikit lagi - anda akan melihat bahawa ia hanya gabungan dari ketiga -tiga kesan yang berbeza, cukup banyak dihancurkan bersama -sama.

Biarkan saya menyelesaikan artikel ini dengan kesan hover terakhir di mana saya menggabungkan latar belakang, laluan klip, dan perspektif untuk mensimulasikan kesan 3D yang lain:

Saya menggunakan kesan yang sama kepada imej dan hasilnya agak baik untuk mensimulasikan 3D dengan satu elemen:

Ingin melihat lebih dekat bagaimana demo terakhir berfungsi? Saya menulis sesuatu di atasnya.

Membungkus

Oof, kami sudah selesai! Saya tahu, ia adalah banyak CSS yang rumit tetapi (1) kita berada di laman web yang betul untuk perkara semacam itu, dan (2) matlamatnya adalah untuk mendorong pemahaman kita tentang sifat CSS yang berbeza ke tahap baru dengan membenarkan mereka berinteraksi antara satu sama lain.

Anda mungkin bertanya apa langkah seterusnya dari sini sekarang bahawa kami menutup siri kecil ini kesan hover CSS maju. Saya akan mengatakan langkah seterusnya adalah untuk mengambil semua yang kita pelajari dan memohon kepada unsur -unsur lain, seperti butang, item menu, pautan, dan lain -lain. Kami menyimpan perkara yang agak mudah untuk mengehadkan helah kami ke elemen tajuk untuk alasan yang tepat; Unsur sebenar tidak penting. Ambil konsep dan lari dengan mereka untuk membuat, bereksperimen dengan, dan belajar perkara -perkara baru!

Atas ialah kandungan terperinci Kesan hover CSS sejuk yang menggunakan kliping latar belakang, topeng, dan 3D. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!