Cara membuat pautan bercahaya di CSS3

Artikel ini menunjukkan mencipta pautan bercahaya animasi menggunakan CSS3. Walaupun artikel terdahulu menggunakan teks bayang-bayang teks dan telus untuk kesan kabur, ini memanfaatkan bayang-bayang teks untuk memberi kesan bercahaya pada hover atau fokus. Pengguna IE9 memerlukan penyemak imbas yang lebih baru kerana ia tidak mempunyai sokongan teks bayang-bayang.

Kesan dicapai dengan kombinasi peralihan teks-bayang-bayang dan CSS3. Mari kita periksa kod.

Pertama, HTML: Pautan mudah dengan kelas "Glow" digunakan:

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="glow">Glowing Link</a>

CSS bermula dengan menentukan keadaan awal dan sifat peralihan. Peralihan ditetapkan kepada 500ms dengan masa linear untuk kesan lancar. Awalan vendor dimasukkan untuk keserasian penyemak imbas yang luas:

a.glow, a.glow:hover, a.glow:focus {
    text-decoration: none;
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15baaf;
    text-shadow: none;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    outline: 0 none;
}

Seterusnya, kesan bercahaya ditakrifkan untuk keadaan hover dan fokus. Dua perencat teks, satu putih dan satu kuning, digunakan untuk kesan yang lebih jelas:

a.glow:hover, a.glow:focus {
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
    text-shadow: -1px 1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffc, 1px -1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}

Halaman demonstrasi (pautan yang ditinggalkan untuk keselamatan) menunjukkan kesannya. Eksperimen dengan sifat

dan peralihan yang berbeza untuk menyesuaikan animasi. text-shadow

Nota Keserasian Pelayar:

kesannya berfungsi dengan baik dalam pelayar moden (Firefox, Chrome, Safari). IE9 tidak mempunyai sokongan teks bayang-bayang. Opera menyokong peralihan tetapi mungkin tidak menggunakannya secara konsisten untuk badai teks, menghasilkan animasi yang kurang lancar.

set kedua pautan dalam demo menggunakan kesan belakang yang terang (menukar warna teks untuk memadankan latar belakang), tetapi ini menjadikan teks tidak dapat dilihat dalam versi IE yang lebih tua. Modernizr atau skrip pengesanan bayang-bayang teks (contoh di bawah) dapat menangani ini:

if (document.createElement("detect").style.textShadow === "") {
    document.getElementsByTagName("html")[0].className += " textshadow";
}

Teknik ini menawarkan cara yang mudah tetapi berkesan untuk menambah minat visual kepada pautan. Jangan ragu untuk berkongsi ciptaan anda!

Soalan Lazim (Soalan Lazim) ditinggalkan kerana sekatan panjang tetapi teks asal memberikan jawapan yang komprehensif.

Atas ialah kandungan terperinci Cara membuat pautan bercahaya di CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!