6 Idea Kreatif untuk Kesan Hover Pautan CSS

Menambah beberapa kesan hover pautan CSS ke laman web biasa dapat meningkatkan daya tarikan visual laman web. Sekiranya anda pernah mengalami kesukaran untuk mencipta kesan hover yang sejuk, artikel ini akan memberi anda enam kesan CSS yang boleh anda gunakan secara langsung untuk projek anda yang seterusnya.

Mari mulakan!

Saya tahu kita bercakap tentang :hover , tetapi kadang -kadang (mungkin tidak selalu) adalah idea yang baik untuk disertakan :focus juga, kerana tidak semua interaksi datang terus dari tetikus, tetapi mungkin satu klik atau tekan utama.

Slaid Highlight Link Hover kesan

Kesan ini menggunakan bayang -bayang kotak untuk pautan sebaris sambil menukar warna teks pautan. Kami mula -mula menambah padding sekitar untuk pautan dan kemudian menambah margin negatif nilai yang sama untuk mengelakkan padding daripada memecahkan aliran teks.

Kami akan menggunakan box-shadow dan bukannya harta background , kerana ia membolehkan kami membuat peralihan.

 {
  Box-Shadow: Inset 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  Warna: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  margin: 0 -.25rem;
  Padding: 0 .25rem;
  Peralihan: Warna .3s mudah-dalam-keluar, box-shadow .3s mudah-dalam-keluar;
}
A: Hover {
  box-shadow: inset 100px 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  Warna: Putih;
}

Salin selepas log masuk

Kesan hover pautan suis teks

Ini adalah kesan yang menarik di mana kita boleh menukar teks yang dipautkan dengan teks lain ketika melayang. Bergerak ke atas teks, teks pautan akan meluncur keluar dan teks baru akan meluncur masuk.

Demo lebih mudah difahami daripada keterangan.

Kesan hover pautan ini mengandungi banyak helah. Tetapi sihir adalah bahawa ia menggunakan atribut data untuk menentukan slaid dalam teks dan memanggilnya menggunakan atribut content yang dipautkan ::after pseudo-element.

Pertama, tag HTML:

<p> Hover <a data-replace="get a link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Dapatkan Pautan</a></p>

Salin selepas log masuk

Ini adalah banyak tag inline, tetapi apa yang anda lihat adalah tag perenggan yang mengandungi pautan dan rentang.

Mari tambahkan beberapa gaya asas ke pautan. Kita perlu menyediakannya dengan kedudukan relatif untuk memastikan elemen pseudo (akan benar-benar diposisikan) di tempat, pastikan ia dipaparkan sebagai blok sebaris untuk mendapatkan kemudahan gaya elemen kotak, dan menyembunyikan apa-apa limpahan yang boleh menyebabkan elemen pseudo.

 {
  Limpahan: Tersembunyi;
  Kedudukan: Relatif;
  paparan: blok sebaris;
}

Salin selepas log masuk

::before dan ::after unsur-unsur pseudo harus mempunyai beberapa kedudukan mutlak supaya mereka disusun dengan pautan sebenar. Kami akan memastikan mereka ditetapkan pada lebar penuh pautan dengan kedudukan sifar kiri offset, bersedia untuk beberapa operasi gelongsor.

 A :: sebelum ini,
a :: selepas {
 Kandungan: '';
  Kedudukan: Mutlak;
  Lebar: 100%;
  Kiri: 0;
}

Salin selepas log masuk

::after pseudo-element mendapat kandungan dari atribut data pautan dalam tag HTML:

 a :: selepas {
  Kandungan: ATTR (Data-Replace);
}

Salin selepas log masuk

Sekarang kita boleh menggunakan transform: translate3d() untuk memindahkan ::after Pseudo-Element 200% ke kanan. Kami memindahkannya kembali ke kedudukan asalnya :hover . Dengan cara ini, kita boleh menetapkan sifar mengimbangi untuk ke arah atas. Ini akan menjadi sangat penting apabila kita menggunakan ::before elemen pseudo kemudian seperti teks-teks.

 a :: selepas {
  Kandungan: ATTR (Data-Replace);
  Atas: 0;
  Transform-asal: 100% 50%;
  Transform: Translate3D (200%, 0, 0);
}

A: Hover :: Selepas,
A: Fokus :: Selepas {
  Transform: Translate3D (0, 0, 0);
}

Salin selepas log masuk

Kami juga akan menukar transform: scale() ::before pseudo-unsur untuk menyembunyikannya secara lalai, dan kemudian skala kembali :hover . Kami akan menjadikannya lebih tinggi dalam ketinggian, contohnya 2px, dan pin ke bawah supaya ia kelihatan seperti teks yang paling menggariskan, yang akan ditukar dengan ::after .

 A :: Sebelum {
  latar belakang-warna: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  Ketinggian: 2px;
  Bawah: 0;
  Transform-asal: 100% 50%;
  Transform: Scalex (0);
}

A: Hover :: Sebelum,
A: Fokus :: Sebelum {
  Transform-Origin: 0% 50%;
  Transform: Scalex (1);
}

Salin selepas log masuk

Selebihnya adalah keutamaan! Kami menambah peralihan kepada kesan penukaran, beberapa warna, dan lain -lain untuk mendapatkan kesan penuh. Nilai -nilai ini terpulang kepada anda.

Lihat kod CSS penuh

`` css a {limpahan: tersembunyi;

A :: Sebelum ini: Kandungan: '' 50%; ATTR (Data-Replace); 70e15b54b3d6;

A: Hover :: sebelum {Transform-Origin: 0% 50%;

A span {paparan: blok inline;

A: Hover Span {Transform: Translate3D (-200%, 0, 0);

https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BHTTPS://www.php.cn/link/93ac0c50dd620dc7b8 D620DC7B88E5FE05C70E15B Latar Belakang Pertumbuhan Pautan Hover Kesan Ini adalah kesan yang sangat popular yang saya lihat di banyak tempat. Ideanya ialah menggunakan pautan `:: sebelum` pseudo-elemen sebagai garis bawah tebal, yang sedikit di belakang teks sebenar pautan. Kemudian, apabila hover, pseudo-element mengembang untuk menampung keseluruhan kandungan.

Ok, beberapa gaya asas untuk pautan. Kami tidak memerlukan hiasan teks, kerana `:: sebelum` akan bertindak sebagai hiasan teks, diikuti oleh beberapa kedudukan relatif untuk mengekalkan` :: sebelum 'di tempat ketika memberikan kedudukan mutlak.

`` CSS
{
  Teks-penyerapan: Tiada;
  Kedudukan: Relatif;
}

Salin selepas log masuk

Sekarang mari kita tetapkan ::before sehingga ketinggiannya adalah kira -kira 8px supaya ia kelihatan seperti garis bawah yang tebal. Kami juga akan memberikan kedudukan mutlak supaya kami dapat mengawal lebar penuh menjadikannya pautan sebenar semasa mengimbanginya supaya ia berada di sebelah kiri dan hanya sedikit dari bahagian bawah, menjadikannya kelihatan seperti menonjolkan pautan secara halus. Anda juga boleh menetapkannya ke z-index: -1 , yang memastikan ia berada di belakang pautan.

 A :: Sebelum {
  Kandungan: '';
  latar belakang warna: HSLA (196, 61%, 58%, .75);
  Kedudukan: Mutlak;
  Kiri: 0;
  Bawah: 3px;
  Lebar: 100%;
  Ketinggian: 8px;
  Z -indeks: -1;
}

Salin selepas log masuk

sangat bagus. Mari buat kelihatan seperti ::before berkembang ketika melayang pautan. Kami hanya perlu menukar ketinggian dari 3px hingga 100%. Perhatikan bahawa saya juga memulihkan bahagian bawah ke sifar supaya latar belakang meliputi lebih banyak ruang apabila ia tumbuh.

 A: Hover :: Sebelum {
  Bawah: 0;
  Ketinggian: 100%;
}

Salin selepas log masuk

Sekarang tambahkan sedikit peralihan kepada perubahan ini:

 A :: Sebelum {
  Kandungan: '';
  latar belakang warna: HSLA (196, 61%, 58%, .75);
  Kedudukan: Mutlak;
  Kiri: 0;
  Bawah: 3px;
  Lebar: 100%;
  Ketinggian: 8px;
  Z -indeks: -1;
  Peralihan: Semua .3s mudah-dalam-keluar;
}

Salin selepas log masuk

Lihat kod CSS penuh

`` CSS A {Text-Decoration: none;

A :: Kandungan: ''

A: Hover :: Sebelum {Bawah: 0;

https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BHTTPS://www.php.cn/link/93ac0c50dd620dc7b8 D620DC7B88E5FE05C70E15B COLOR SWAP LINK LINK HOVER Kesan dari kanan ke kiri Saya secara peribadi suka menggunakan kesan ini dalam pautan dalam navigasi. Pautan bermula dengan warna tanpa garis bawah. Kemudian, pada hover, warna baru slaid dari kanan dan slaid garis bawah dari kiri.

Sangat kemas, bukan? Terdapat banyak tindakan di luar sana, jadi anda mungkin ingin mempertimbangkan kesan aksesibiliti dan memasukkan segala-galanya dalam pertanyaan gerakan yang dikurangkan lebih disukai untuk menggantikan dengan kandungan yang lebih bernuansa bagi mereka yang sensitif terhadap pergerakan.

Inilah cara ia berfungsi. Kami menyediakan kecerunan latar belakang linear untuk pautan dengan perhentian keras antara kedua -dua warna separuh jalan.

`` CSS
{
  Imej latar belakang: Linear-Gradient (
    ke kanan,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
}

Salin selepas log masuk

Kami menetapkan latar belakang dua kali lebar pautan, atau 200% dan meletakkannya sepenuhnya ke kiri. Dengan cara ini, nampaknya hanya satu daripada dua warna kecerunan yang dipaparkan.

 {
  Imej latar belakang: Linear-Gradient (
    ke kanan,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  Latar Belakang: 200% 100%;
  Latar Belakang: -100%;
}

Salin selepas log masuk

Perkara-perkara sihir berlaku apabila kita menggunakan beberapa sifat -webkit- yang tidak standard. Satu menghilangkan warna dari teks untuk menjadikannya telus. Satu lagi klip kecerunan latar belakang kepada teks, jadi teks sebenarnya nampaknya warna latar belakang.

 {
  Imej latar belakang: Linear-Gradient (
    ke kanan,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  Latar Belakang: 200% 100%;
  Latar Belakang: -100%;
  -WebKit-Background-Clip: Teks;
  -WebKit-Teks-Fill-warna: telus;
}

Salin selepas log masuk

Masih mengikuti? Sekarang mari kita buat pseudo-underscore pautan dengan menggunakan ::before . Kami akan memberikan warna yang sama seperti bahagian tersembunyi kecerunan latar belakang pautan dan meletakkannya di bawah pautan sebenar supaya ia kelihatan seperti text-decoration: underline .

 A: Sebelum {
  Kandungan: '';
  Latar Belakang: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  paparan: blok;
  Kedudukan: Mutlak;
  Bawah: -3px;
  Kiri: 0;
  lebar: 0;
  Ketinggian: 3px;
}

Salin selepas log masuk

Hover kita slaid ::before ke tempat dan masuk dari kiri:

 A: Hover {
 Latar Belakang: 0;
}

Salin selepas log masuk

Sekarang, ini agak rumit. Pada hover, kami menetapkan yang dihubungkan ::before pseudo-element hingga 100% lebar pautan. Jika kita memohon ini secara langsung ke hover pautan, kita akan membuat pautan itu sendiri lebar penuh, yang akan menggerakkannya di sekitar skrin. Alamak!

 A: Hover :: Sebelum {
  Lebar: 100%;
}

Salin selepas log masuk

Tambahkan sedikit peralihan untuk membuat sesuatu berjalan lancar:

 {
  Imej latar belakang: Linear-Gradient (
    ke kanan,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  Latar Belakang: 200% 100%;
  Latar Belakang: -100%;
  -WebKit-Background-Clip: Teks;
  -WebKit-Teks-Fill-warna: telus;
  Peralihan: Semua 0.3s mudah-dalam-keluar;
}

Salin selepas log masuk

Lihat kod CSS penuh

`` css a {latar belakang-imej: linear-gradient (ke kanan,

54b3d6,

 <code>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%, https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%</code>

Salin selepas log masuk

);

A: Kandungan: ''

A: Hover {latar belakang-kedudukan: 0;

A: Hover :: Sebelum {lebar: 100%;

https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BHTTPS://www.php.cn/link/93ac0c50dd620dc7b8 D620DC7B88E5FE05C70E15B RAINBOW Garis Pautan Hover Kesan Kita Tidak Boleh Menggunakan `Teks-Dekorasi-Kolor: Rainbow`, tetapi kita boleh memalsukannya dengan mencampurkan kecerunan linear dan sihir latar belakang.

Pertama, kami memadam pautan `teks pengaliran`:

`` CSS
{
  Teks-penyerapan: Tiada;
}

Salin selepas log masuk

Sekarang ini kecerunan. Kami menghubungkan dua kecerunan linear pada harta background yang sama. Kecerunan adalah warna awal sebelum melayang. Yang kedua ialah pelangi di hover.

 {
  Latar Belakang:
    Linear-Gradient (
      ke kanan,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ))
    Linear-Gradient (
      ke kanan,
      RGBA (255, 0, 0, 1),
      RGBA (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  );
}

Salin selepas log masuk

Mari buat saiz latar belakang hanya 3px tinggi supaya kelihatan seperti, anda tahu, digariskan. Kita boleh menyesuaikan saiz dua kecerunan pada harta background-size pada masa yang sama supaya kecerunan awal adalah lebar penuh dan ketinggian 3px, manakala pelangi mempunyai lebar sifar.

 {
  Latar Belakang:
    Linear-Gradient (
      ke kanan,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ))
    Linear-Gradient (
      ke kanan,
      RGBA (255, 0, 0, 1),
      RGBA (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  );
  Latar Belakang: 100% 3px, 0 3px;
}

Salin selepas log masuk

Sekarang kita boleh meletakkan kecerunan latar belakang pada harta background-position pada masa yang sama supaya kecerunan pertama dapat dilihat sepenuhnya dan pelangi ditolak dari pandangan. Oh, mari pastikan latar belakang tidak diulang apabila digunakan.

 {
  Latar Belakang:
    Linear-Gradient (
      ke kanan,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ))
    Linear-Gradient (
      ke kanan,
      RGBA (255, 0, 0, 1),
      RGBA (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  );
  Latar Belakang: 100% 3px, 0 3px;
  Latar Belakang: 100%100%, 0 100%;
  Latar Belakang berulang: tidak berulang;
}

Salin selepas log masuk

Mari kita mengemas kini background-size pada hover supaya nilai swap kecerunan:

 A: Hover {
  Latar Belakang: 0 3px, 100% 3px;
}

Salin selepas log masuk

Akhirnya, buat sedikit peralihan apabila berlegar berlaku:

 {
  Latar Belakang:
    Linear-Gradient (
      ke kanan,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ))
    Linear-Gradient (
      ke kanan,
      RGBA (255, 0, 0, 1),
      RGBA (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  );
  Latar Belakang: 100% 3px, 0 3px;
  Latar Belakang: 100%100%, 0 100%;
  Latar Belakang berulang: tidak berulang;
  Peralihan: 400ms bersaiz latar belakang;
}

Salin selepas log masuk

Lihat!

Hover kesan dengan pautan garis bawah

Geoff Graham sebenarnya memperkenalkan kesan ini apabila dia baru -baru ini menganalisis kesan hover sejuk Adam Argyle. Dalam demo beliau, warna latar belakang di belakang pautan memasuki dari kiri dan keluar dari kanan apabila tetikus bergerak keluar.

Versi saya memudahkan latar belakang untuk menjadi lebih seperti garis bawah.

 {
  Kedudukan: Relatif;
}

A :: Sebelum {
    Kandungan: '';
    Kedudukan: Mutlak;
    Lebar: 100%;
    Ketinggian: 4px;
    Radius sempadan: 4px;
    latar belakang-warna: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b18272f;
    Bawah: 0;
    Kiri: 0;
    Transform-asal: betul;
    Transform: Scalex (0);
    Peralihan: Transform .3s mudah-dalam-keluar;
  }

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

Salin selepas log masuk

Ini bukan satu -satunya cara untuk mencapai matlamat ini! Berikut adalah cara lain Justin Wong menggunakan latar belakang:

Geoff juga menawarkan pelbagai kesan hover pautan CSS, dari kemas hingga benar -benar tidak masuk akal. Patut dilihat! Untuk kandungan berguna pada gaya pautan dan butang, lihat tutorial Philip Zastrow di DigitalOcean.

Hanya pautan!

Terdapat banyak pilihan untuk membuat kesan hover anda sendiri untuk pautan sebaris menggunakan CSS. Anda juga boleh bermain -main dengan kesan ini dan membuat kesan baru. Saya harap anda menikmati artikel ini. Terus berusaha!

Atas ialah kandungan terperinci 6 Idea Kreatif untuk Kesan Hover Pautan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!