Penjana CSS Text Glitch

Apakah alat ini?

Kesan glitch CSS memalsukan rupa isyarat siaran yang rosak atau pita VHS yang koyak dengan menduakan sekeping teks menggunakan pseudo-elemen ::before dan ::after, mengalih setiap salinan sedikit dengan text-shadow berwarna (secara klasik merah dan sian, menggemakan ralat isyarat RGB analog), dan menganimasikan clip-path setiap salinan dengan @keyframes supaya kepingan mendatar berbeza bagi setiap salinan berwarna berkelip masuk dan keluar dari masa ke masa.

Teknik ini tidak memerlukan imej, tiada gelung animasi JavaScript dan tiada canvas — ia CSS tulen dilapis pada satu elemen HTML yang membawa teksnya sendiri dua kali: sekali sebagai kandungan teks sebenar, dan sekali melalui atribut data-text yang dibaca pseudo-elemen dengan content: attr(data-text).

Sumber: CSS Pseudo-Elements Module Level 4, W3C — mentakrifkan pseudo-elemen ::before/::after dan fungsi attr() yang menjadi asas kesan ini.

Kenapa guna alat ini?

• Pratonton beranimasi secara langsung — lihat kesan glitch sebenar semasa anda menaip dan melaraskan tetapan, bukan sekadar mockup statik.
• Dua warna aksen yang boleh dilaraskan secara berasingan, lalai kepada rupa RGB-split merah/sian klasik tetapi boleh disesuaikan dengan mana-mana jenama atau tema.
• Slider intensiti mengawal jarak alihan bayang warna dalam piksel; slider kelajuan mengawal seberapa laju keyframes clip-path berputar.
• Menyalin kedua-dua CSS (termasuk blok @keyframes penuh) dan struktur HTML tepat yang diperlukan, kerana kesan ini bergantung pada atribut data-text yang sepadan dengan teks kelihatan.
• CSS tulen — tiada JavaScript diperlukan semasa masa jalan sebaik sahaja ia berada di halaman anda, dan tiada pustaka luaran atau imej untuk dimuatkan.
• Percuma, tiada pendaftaran, berjalan sepenuhnya dalam pelayar anda.

Cara menggunakannya

1. Taip teks yang anda mahu digelitch ke dalam medan teks — ia mengemas kini pratonton langsung dengan segera.
2. Pilih dua warna aksen; lalai klasik ialah merah dan sian untuk rupa RGB-split retro, tetapi mana-mana dua warna berkontras berfungsi.
3. Laraskan slider intensiti untuk kawal sejauh mana dua lapisan warna itu berjauhan — nilai lebih tinggi dibaca sebagai glitch yang lebih agresif.
4. Laraskan slider kelajuan untuk kawal seberapa laju glitch berkelip.
5. Salin blok CSS dan tampal ke dalam stylesheet anda.
6. Salin cebisan HTML dan gunakan seperti yang ditunjukkan — atribut data-text mesti sepadan dengan teks kelihatan elemen itu supaya kesan berfungsi.

Contoh

Input

Teks: "GLITCH" · Warna 1: #ff0040 (merah) · Warna 2: #00fff9 (sian) · Intensiti: 5px

Hasil

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

Teks asas kekal putih manakala dua salinan pseudo-elemennya berkelip dalam merah dan sian pada kedua-dua sisi, menghasilkan rupa isyarat rosak klasik.

Kenapa elemen itu perlukan atribut data-text

Pseudo-elemen ::before dan ::after tidak boleh membaca kandungan teks biasa elemen secara langsung — CSS content: attr() hanya berfungsi dengan atribut HTML sebenar, bukan nod teks anak. Itulah sebabnya HTML yang dijana mengulangi teks itu sebagai atribut data-text="..." pada elemen yang sama: teks kelihatan dipaparkan seperti biasa, manakala setiap pseudo-elemen secara berasingan menarik rentetan yang sama melalui content: attr(data-text) dan melapiskan salinan beranimasi bertukar warnanya sendiri di atas.

Bagaimana kelipan itu dihasilkan

Setiap pseudo-elemen dianimasikan dengan blok @keyframes sendiri yang melangkah melalui satu siri nilai clip-path: inset(...). Pada setiap keyframe, jalur mendatar berbeza salinan berwarna itu didedahkan manakala selebihnya dipotong keluar, jadi kepingan nampak warna merah (atau sian) melompat naik turun semasa animasi bermain — digabungkan dengan alihan text-shadow berwarna, ini dibaca sebagai saluran warna koyak dan tidak sejajar dan bukannya cahaya samar yang licin.

Di mana kesan ini sesuai

• Tajuk hero pada halaman pendaratan permainan, cyberpunk, streaming atau jenama muzik.
• Halaman 404 / ralat, di mana glitch mengukuhkan tema 'sesuatu telah rosak'.
• Keadaan hover atau fokus pada tajuk atau logo untuk aksen tarikan perhatian ringkas.
• Keadaan memuatkan atau 'memproses' di mana glitch menyampaikan aktiviti sistem.
• Guna dengan berhemat pada teks perenggan — kesan ini sengaja sukar dibaca sepintas lalu, jadi ia berfungsi terbaik pada tajuk pendek atau logotype, bukan perenggan.

Menggabungkan dengan alat CSS lain

Tajuk glitch selalunya hanya satu elemen dalam susun atur gelap berkontras tinggi yang lebih besar. Gabungkan ia dengan bayang cahaya samar yang lembut atau bucu kad bulat daripada alat CSS lain di bawah untuk rupa yang lebih lengkap.

→ Penjana CSS Box-Shadow · Penjana CSS Border-Radius

Soalan lazim