4 kesan hover sejuk yang menggunakan bayangan teks css

Dalam artikel sebelumnya, kami membincangkan cara menggunakan sifat latar belakang CSS untuk menghasilkan kesan hover yang sejuk. Kali ini, kami akan memberi tumpuan kepada harta text-shadow CSS dan meneroka kesan hover yang lebih menarik. Anda mungkin tertanya -tanya bagaimana menambahkan bayang -bayang ke teks boleh mempunyai kesan yang sejuk, tetapi maksudnya ialah: kita sebenarnya tidak membuat sebarang bayang -bayang untuk kesan hover teks ini.

Siri Kesan Hover Cool:

1. Gunakan sifat latar belakang untuk mencapai kesan hover yang sejuk
2. Gunakan bayangan teks CSS untuk mencapai kesan hover sejuk (lokasi semasa anda!)
3. Gunakan tanaman latar, pelekat dan 3D untuk mencapai kesan hover yang sejuk

text-shadow tetapi tidak ada bayangan teks?

Izinkan saya mengeluarkan kekeliruan dengan kesan hover yang akan kita bina dalam demo berikut:

Tanpa melihat kod itu, ramai di antara kamu secara intuitif akan berfikir bahawa untuk setiap kesan hover, kita menyalin teks dan menghidupkannya secara bebas. Sekarang, jika anda melihat kod tersebut, anda akan mendapati bahawa tiada teks dalam HTML sebenarnya disalin. Pernahkah anda perasan content: "text" tidak digunakan dalam CSS?

Lapisan teks dicipta sepenuhnya dengan text-shadow !

Hover kesan #1

Mari merosakkan kod CSS:

 .Hover-1 {
  Talian ketinggian: 1.2EM;
  Warna: #0000;
  bayang-bayang teks: 
    0 0 #000, 
    0 1.2EM #1095C1;
  Limpahan: Tersembunyi;
  Peralihan: .3s;
}
.Hover-1: Hover {
  bayang-bayang teks: 
    0 -1.2em #000, 
    0 0 #1095C1;
}

Perkara pertama yang perlu diperhatikan ialah untuk menyembunyikan teks sebenar, saya menetapkan warna teks sebenar menjadi telus (menggunakan #0000 ). Selepas itu, saya menggunakan text-shadow untuk membuat dua bayang-bayang, masing-masing hanya mentakrifkan dua nilai panjang. Ini bermakna tiada radius kabur, mengakibatkan bayang -bayang yang jelas dan tajam yang menghasilkan salinan teks dengan warna yang ditentukan.

Itulah sebabnya saya mendakwa dalam pengenalan bahawa tidak ada bayangan di sini. Apa yang kita lakukan tidak begitu banyak bayangan "klasik" sebagai cara mudah untuk menyalin teks.

Kami mempunyai dua lapisan teks yang kami bergerak ketika melayang. Jika kita menyembunyikan limpahan, teks pendua akan tidak kelihatan dan bergerak menjadikannya kelihatan seperti teks sebenar telah digantikan oleh teks lain. Ini adalah helah utama untuk membuat semua contoh dalam artikel ini berfungsi dengan baik.

Mari mengoptimumkan kod tersebut. Saya menggunakan nilai 1.2em beberapa kali untuk menentukan ketinggian dan mengimbangi bayangan, menjadikannya calon yang ideal untuk sifat adat CSS (kami memanggilnya --h ):

 .Hover-1 {
  --h: 1.2em;

  ketinggian garis: var (-h);
  Warna: #0000;
  bayang-bayang teks: 
    0 0 #000, 
    0 var (-h) #1095C1;
  Limpahan: Tersembunyi;
  Peralihan: .3s;
}
.Hover-1: Hover {
  bayang-bayang teks: 
    0 calc (-1 * var (-h)) #000, 
    0 0 #1095C1;
}

Kami juga boleh memudahkan kod menggunakan lebih banyak pengiraan calc() supaya kami hanya menggunakan text-shadow sekali. (Kami melakukan perkara yang sama dalam jawatan terdahulu.)

 .Hover-1 {
  --h: 1.2em;   

  ketinggian garis: var (-h);
  Warna: #0000;
  bayang-bayang teks: 
    0 calc (-1*var (--_ t, 0em)) #000, 
    0 calc (var (-h)-var (--_ t, 0em)) #1095C1;
  Limpahan: Tersembunyi;
  Peralihan: .3s;
}
.Hover-1: Hover {
  --_ t: var (-h);
}

Jika anda tertanya -tanya mengapa saya menambah garis bawah ke pembolehubah --_t , ini hanya konvensyen penamaan yang saya gunakan untuk membezakan antara pembolehubah (seperti --h ) yang pengguna boleh mengemas kini dari pembolehubah dalaman (seperti --_t ) yang hanya digunakan untuk tujuan pengoptimuman dan tidak perlu diubah. Dalam erti kata lain, garis bawah adalah sebahagian daripada nama pembolehubah dan tidak mempunyai makna yang istimewa.

Kami juga boleh mengemas kini kod untuk mendapatkan kesan yang bertentangan, di mana teks pendua slaid dari atas:

Kami hanya membuat kemas kini kecil ke harta text-shadow - kami tidak menyentuh apa -apa lagi!

Hover Effect #2

Untuk kesan ini, kami akan menghidupkan dua sifat: text-shadow dan background . Mengenai text-shadow kita masih mempunyai dua lapisan seperti contoh sebelumnya, tetapi kali ini kita akan bergerak hanya satu daripada mereka sambil menetapkan warna lapisan lain ke telus semasa swap.

 .Hover-2 {
  /* tinggi*/
  --h: 1.2em;

  ketinggian garis: var (-h);
  Warna: #0000;
  bayang-bayang teks: 
    0 var (--_ t, var (-h)) #fff,
    0 0 var (--_ c, #000);
  Peralihan: 0.3s;
}
.Hover-2: Hover {
  --_ t: 0;
  --_ C: #0000;
}

Pada hover, kami menggerakkan lapisan teks putih ke bahagian atas sambil menukar warna lapisan lain menjadi telus. Untuk melakukan ini, kami menambah animasi background-size yang digunakan untuk kecerunan:

Akhirnya, kami menambah overflow: hidden untuk menjadikan animasi hanya dapat dilihat di dalam sempadan elemen:

 .Hover-2 {
  /* tinggi*/
  --h: 1.2em;

  ketinggian garis: var (-h);
  Warna: #0000;
  bayang-bayang teks: 
    0 var (--_ t, var (-h)) #ffff,
    0 0 var (--_ c, #000);
  Latar Belakang: 
    Linear-Gradient (#1095C1 0 0) 
    bawah/100% var (--_ d, 0) tidak berulang;
  Limpahan: Tersembunyi;
  Peralihan: 0.3s;
}
.Hover-2: Hover {
  --_ D: 100%;
  --_ t: 0;
  --_ C: #0000;
}

Apa yang kita lakukan di sini adalah untuk menggabungkan ciri-ciri text-shadow CSS dan background untuk menghasilkan kesan hover yang sejuk. Selain itu, kami dapat menggunakan pembolehubah CSS untuk mengoptimumkan kod tersebut.

Jika tatabahasa latar belakang kelihatan pelik, saya sangat mengesyorkan anda membaca catatan terdahulu saya. Kesan hover seterusnya juga bergantung pada animasi yang saya terperinci dalam jawatan itu. Kecuali anda sudah biasa dengan kemahiran latar belakang CSS, saya cadangkan anda membaca artikel itu untuk maklumat latar belakang sebelum terus membaca artikel ini.

Dalam jawatan terdahulu, anda menunjukkan kepada kami bagaimana untuk membuat kesan hover menggunakan hanya satu pembolehubah - bolehkah anda melakukannya di sini?

Ya, betul -betul! Kita sememangnya boleh menggunakan teknik pensuisan kering yang sama supaya kita hanya perlu mengendalikan harta tersuai CSS yang hanya menukar nilai semasa melayang:

 .Hover-2 {
  /* tinggi*/
  --h: 1.2em;

  ketinggian garis: var (-h);
  Warna: #0000;
  bayang-bayang teks: 
    0 var (--_ i, var (-h)) #fff,
    0 0 rgb (0 0 0 / calc (var (--_ i, 1) * 100%));
  Latar Belakang: 
    Linear-Gradient (#1095C1 0 0) 
    bawah/100% calc (100%-var (--_ i, 1) * 100%) no-repeat;
  Limpahan: Tersembunyi;
  Peralihan: 0.3s;
}
.Hover-2: Hover {
  --_ i: 0;
}

Hover effect #3

Kesan hover ini tidak lebih daripada gabungan dua kesan yang telah kami buat: kesan hover kedua dalam jawatan terdahulu dan kesan hover pertama dalam jawatan ini.

 .Hover-3 {
  /* warna*/
  --c: #1095C1;
  /* tinggi*/
  --h: 1.2em;

  /* Kesan hover pertama dalam artikel ini*/
  ketinggian garis: var (-h);  
  Warna: #0000;
  Limpahan: Tersembunyi;
  bayang-bayang teks: 
    0 calc (-1 * var (--_ t, 0em)) var (-c), 
    0 calc (var (-h)-var (--_ t, 0em)) #fff;
  /* Kesan hover kedua dalam jawatan terdahulu*/
  Latar Belakang: 
    Linear-Gradient (Var (-C) 0 0) NO Repeat 
    calc (200%-var (--_ p, 0%)) 100% / 200% var (--_ p, .08EM);
  Peralihan: .3s var (--_ s, 0s), Latar Belakang-kedudukan .3s calc (.3s-var (--_ s, 0s));
}
.Hover-3: Hover {
  --_ t: var (-h);
  --_ P: 100%;
  --_ S: .3s
}

Apa yang saya lakukan adalah menyalin dan menyisipkan kesan dari contoh lain dan membuat beberapa tweak kecil kepada nama pembolehubah. Apabila mereka digabungkan, mereka membuat kesan hover yang bersih! Pada pandangan pertama, kesan ini mungkin kelihatan rumit dan sukar dicapai, tetapi pada akhirnya, ia hanya menggabungkan dua kesan yang agak mudah ke dalam satu.

Jika kita menganggap pengoptimuman sebelumnya yang telah kita selesaikan, ia juga harus menjadi tugas mudah untuk mengoptimumkan kod menggunakan teknologi pembolehubah toggle kering:

 .Hover-3 {
  /* warna*/
  --c: #1095C1;
  /* tinggi*/
  --h: 1.2em;

  ketinggian garis: var (-h);  
  Warna: #0000;
  Limpahan: Tersembunyi;
  bayang-bayang teks: 
    0 calc (-1 * var (-h) * var (--_ i, 0)) var (-c), 
    0 calc (var (-h) * (1-var (--_ i, 0))) #fff;
  Latar Belakang: 
    Linear-Gradient (Var (-C) 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-3: Hover {
  --_ i: 1;
}

Hover Effect #4

Kesan hover ini adalah peningkatan kepada kesan hover kedua. Pertama, mari kita memperkenalkan animasi clip-path untuk memaparkan salah satu lapisan teks, dan kemudian gerakkannya:

Berikut adalah penjelasan yang lebih baik untuk lebih memahami apa yang sedang berlaku:

Pada mulanya, kami menggunakan inset(0 0 0 0) , yang sama dengan overflow: hidden , kerana kita hanya melihat teks sebenar. Pada hover, kami mengemas kini nilai ketiga (mewakili bahagian bawah) dengan nilai negatif yang sama dengan ketinggian untuk memaparkan lapisan teks yang diletakkan di bahagian bawah.

Dari sana kita dapat menambahkan ini ke kesan hover kedua yang kita buat dalam artikel ini, dan inilah yang kita dapat:

Kami semakin dekat dan lebih dekat! Perhatikan bahawa kita perlu menjalankan animasi clip-path terlebih dahulu dan kemudian segala-galanya. Untuk melakukan ini, kita boleh menambah kelewatan kepada semua sifat pada hover, kecuali clip-path :

 Peralihan: 0.4s 0.4s, Clip-Path 0.4s;

Apabila tetikus dipindahkan, kami melakukan sebaliknya:

 Peralihan: 0.4s, Clip-Path 0.4s 0.4s;

Sentuhan terakhir adalah untuk menambah box-shadow untuk membuat kesan gelongsor segi empat tepat biru. Malangnya, background tidak menghasilkan kesan ini, kerana latar belakang dipotong ke kawasan kandungan secara lalai. Pada masa yang sama, box-shadow boleh melampaui kawasan kandungan.

 .Hover-4 {
  /* warna*/
  --c: #1095C1;
  /* tinggi*/
  --h: 1.2em;

  ketinggian garis: var (-h);
  Warna: #0000;
  bayang-bayang teks: 
    0 var (--_ t, var (-h)) #fff,
    0 0 var (--_ c, #000);
  box-shadow: 0 var (--_ t, var (-h)) var (-c);
  Clip-Path: Inset (0 0 0 0);
  Latar Belakang: Linear-Gradient (var (-c) 0 0) 0 var (--_ t, var (-h)) no-repeat;
  Peralihan: 0.4s, Clip-Path 0.4s 0.4s;
}
.Hover-4: Hover {
  --_ t: 0;
  --_ C: #0000;
  klip-path: inset (0 0 calc (-1 * var (-h)) 0);
  Peralihan: 0.4s 0.4s, Clip-Path 0.4s;
}

Jika anda melihat dengan teliti pada box-shadow , anda akan mendapati bahawa ia mempunyai nilai yang sama seperti lapisan teks putih di dalam text-shadow . Ini adalah logik, kerana kedua -duanya perlu dipindahkan dengan cara yang sama. Kedua -duanya akan meluncur ke bahagian atas. box-shadow kemudian di belakang elemen dan text-shadow berada di bahagian atas.

Berikut adalah demonstrasi dengan beberapa pengubahsuaian untuk menggambarkan bagaimana lapisan bergerak:

Tunggu, sintaks latar belakang sedikit berbeza daripada yang digunakan dalam kesan hover kedua!

Penglihatan yang baik! Ya, kami menggunakan teknik latar belakang yang berbeza untuk menghasilkan kesan yang sama. Daripada menghidupkan saiz dari 0% hingga 100%, kami menghidupkan kedudukannya.

Jika kita tidak menentukan saiz pada kecerunan, ia akan menduduki keseluruhan lebar dan ketinggian secara lalai. Oleh kerana kita tahu ketinggian elemen ( --h ), kita boleh membuat kesan gelongsor dengan mengemas kini kedudukan dari 0 var(--h) hingga 0 0 .

 .Hover-4 {
  / * ... */
  Latar Belakang: Linear-Gradient (var (-c) 0 0) 0 var (--_ t, var (-h)) no-repeat;
}
.Hover-4: Hover {
  --_ T: 0;
}

Kita boleh menggunakan animasi background-size untuk mendapatkan kesan yang sama, tetapi kami hanya menambah helah lain ke senarai helah kami!

Dalam demo, anda juga menggunakan inset(0 0 1px 0) ... mengapa?

Saya kadang -kadang menambah atau mengeluarkan beberapa piksel atau peratusan di sini untuk menyempurnakan apa sahaja yang tidak kelihatan sangat baik. Dalam kes ini, garis buruk muncul di bahagian bawah, sambil menambah 1px akan mengeluarkannya.

Bagaimana pula dengan pengoptimuman berubah -ubah kering?

Saya akan meninggalkan tugas ini kepada anda! Selepas membaca empat kesan hover dan artikel terdahulu, anda harus dapat mengemas kini kod supaya ia hanya menggunakan satu pembolehubah. Saya ingin melihat percubaan anda dalam komen!

Sekarang awak!

Biarkan saya berkongsi kesan hover terakhir, yang merupakan versi lain dari kesan terdahulu. Bolehkah anda mengetahui bagaimana ia dilaksanakan tanpa melihat kod tersebut? Ini adalah latihan yang hebat, jadi jangan menipu!

Meringkaskan

Kami melihat banyak contoh yang menunjukkan bagaimana menggunakan satu elemen dan beberapa baris CSS cukup untuk membuat beberapa kesan hover yang agak kompleks pada elemen teks-tidak ada unsur-unsur pseudo yang diperlukan! Kami juga dapat menggabungkan pelbagai teknologi untuk mencapai animasi yang lebih kompleks dengan usaha yang lebih kecil.

Sekiranya anda berminat untuk menggali apa yang melampaui empat kesan hover bayang -bayang teks dalam artikel ini, lihat koleksi 500 kesan hover saya, di mana saya meneroka pelbagai teknik yang berbeza.

Atas ialah kandungan terperinci 4 kesan hover sejuk yang menggunakan bayangan teks css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!