Cara membuat kesan pautan teks kabur CSS3

Penjelasan terperinci mengenai kesan teks kabur dalam CSS3 dan Soalan Lazim

mata utama

• CSS3 boleh membuat kesan teks kabur dengan warna teks telus dan bayang -bayang teks, tetapi tidak semua pelayar menyokong atribut text-shadow. Dalam kes ini, anda boleh menggunakan ModernIZR atau menulis kod pengesanan bayangan teks tersuai sebagai penyelesaian.
• Kesan yang menyenangkan dapat dicapai untuk menu navigasi dengan lancar mengaburkan pautan masuk dan keluar sambil melayang atau fokus. Ini melibatkan menentukan kelas "kabur" yang boleh digunakan untuk sebarang pautan dan kemudian menggunakan gaya CSS yang boleh digunakan dalam semua pelayar.
• Apabila membuat kesan teks kabur, pastikan anda memberi perhatian kepada isu kebolehaksesan dan penglihatan. Di samping itu, jumlah kabur boleh dikawal dengan menyesuaikan atribut bayangan teks ketiga (menentukan jumlah kabur). Ia boleh diubah suai untuk meningkatkan atau mengurangkan kesan kabur.

Berikut adalah contoh kesan teks yang saya lihat di laman web Trik CSS Chris Coyier. Teks Blur boleh dibuat dalam CSS3 dengan menggunakan warna teks telus dan bayang -bayang teks:

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

Malangnya, tidak semua penyemak imbas menyokong

. IE9 dan ke bawah akan menggunakan warna telus, tetapi tiada kesan bayangan - teks menjadi tidak kelihatan. Kita perlu beralih kepada Modernizr atau menulis kod pengesanan bayangan teks kita sendiri. Kod JavaScript berikut melampirkan kelas "TextShadow" kepada elemen HTML apabila penyemak imbas menyokongnya. Oleh itu, kita boleh menggunakan pemilih CSS ".TextShadow .Blur-Text" untuk memastikan ia hanya digunakan jika kesannya tidak menyebabkan tingkah laku buruk: text-shadow

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

Amaran: Kelakuan Fuzzy Opera Chrome dan Firefox mempamerkan teks kabur, tetapi dilumpuhkan dalam IE. Walau bagaimanapun, opera boleh menjadi pelik; Ini seolah -olah menjadi kesilapan, kerana menggunakan warna akan menyelesaikan masalah. text-shadow rgba(0,0,0,0)

pautan fuzzy

Dengan beberapa sihir tambahan CSS3, kita boleh membuat pautan dengan lancar kabur masuk dan keluar ketika melayang atau fokus. Ini boleh menjadi kesan yang menyenangkan untuk menu navigasi. Kami akan menentukan kelas "kabur" (atau "kabur" yang boleh digunakan untuk sebarang pautan. Pautan akan bermula dengan kabur dan kembali ke fokus normal apabila diaktifkan. Begitu juga, kita akan menentukan kelas "kabur" yang mengaburkan teks ketika melayang/fokus, i.e.:

kita kini memerlukan gaya CSS asas yang digunakan untuk semua pelayar -bahkan mereka yang tidak menyokong

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始模糊，结束清晰</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始清晰，结束模糊</a>

:

text-shadow

set gaya seterusnya berlaku untuk semua elemen

a.blur {
  text-decoration: none;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b339;
}

a.blur:hover, a.blur:focus {
  text-decoration: underline;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b933;
}

, tanpa mengira sama ada mereka mempunyai tumpuan atau tidak:

• kami mengeluarkan pautan garis bawah dan garis besar
• Tetapkan warna teks ke telus dan
• Sapukan peralihan CSS3 yang menghidupkan lancar antara bayang -bayang teks dan bayang -bayang teks penuh. Kesannya bermula selepas 100 milisaat dan selesai selepas 400 milisaat.

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

Akhirnya, kita menentukan dua keadaan bayangan teks. Atribut Shadow Teks ketiga mentakrifkan "jumlah kabur". Ia akan bernyawa antara 0 dan 4px, tetapi jika lebih kurang kabur diperlukan, anda boleh mengubahnya:

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

Lihat halaman Demo Fuzzy Link - Kod sumber mengandungi semua CSS dan JavaScript yang diperlukan. Saya harap anda dapati ia berguna, tetapi berhati -hati mengenai isu kebolehcapaian/penglihatan apabila menggunakan kesan ini. Jika anda menggunakannya di tempat lain, saya suka menerima komen anda dan menyiarkan URL.

FAQS untuk kesan teks kabur dalam css3

(bahagian Soalan Lazim ditinggalkan di sini kerana terlalu lama dan sangat berulang -ulang dengan kandungan asal. Soalan Lazim boleh dipilih secara selektif atau disusun semula seperti yang diperlukan dan ditulis semula dalam bahasa yang lebih ringkas.)

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