Kesan Teks Gangguan CSS

Cipta kesan gangguan yang menakjubkan untuk teks anda dengan penjana interaktif ini. Sesuai untuk cyberpunk, permainan atau sebarang reka bentuk yang memerlukan rupa futuristik yang edgy.

Glitch Generator

Tetapan Teks

60px
5

Pilihan Eksport

Pratonton Langsung

Kesan Gangguan
Kod yang dijana
/* CSS for your glitch effect */ .your-glitch-class { position: relative; color: #000000; font-size: 60px; font-weight: bold; } .your-glitch-class::before, .your-glitch-class::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .your-glitch-class::before { left: 2px; text-shadow: -1px 0 #00CEFF; animation: glitch-anim 2s infinite linear alternate-reverse; } .your-glitch-class::after { left: -2px; text-shadow: -1px 0 #FF2E63; animation: glitch-anim2 3s infinite linear alternate-reverse; opacity: 0.7; } @keyframes glitch-anim { 0% { clip: rect(42px, 9999px, 28px, 0); } 20% { clip: rect(62px, 9999px, 58px, 0); } 40% { clip: rect(33px, 9999px, 37px, 0); } 60% { clip: rect(59px, 9999px, 71px, 0); } 80% { clip: rect(1px, 9999px, 14px, 0); } 100% { clip: rect(42px, 9999px, 73px, 0); } } @keyframes glitch-anim2 { 0% { clip: rect(25px, 9999px, 50px, 0); } 20% { clip: rect(33px, 9999px, 44px, 0); } 40% { clip: rect(70px, 9999px, 90px, 0); } 60% { clip: rect(2px, 9999px, 14px, 0); } 80% { clip: rect(60px, 9999px, 76px, 0); } 100% { clip: rect(42px, 9999px, 50px, 0); } }

Glitch Examples

CYBERPUNK

Gaya Cyberpunk

Sesuai untuk tajuk permainan, poster dan apa sahaja yang memerlukan kelebihan futuristik itu.

Gangguan Kuat
HACKED

Estetika Penggodam

Cipta rupa yang mengganggu dan tidak berfungsi untuk reka bentuk bertema keselamatan.

Gangguan Sengit
PERMAINAN RETRO

Permainan Retro

Gaya permainan nostalgia 80-an/90-an dengan sentuhan gangguan moden.

Gangguan Sederhana
BROKEN

Kerosakan Digital

Simulasikan paparan digital yang rosak atau rosak.

Gangguan huru-hara
SUBTLE

Gangguan halus

Kesan gangguan yang lebih halus untuk reka bentuk profesional yang memerlukan sedikit kelebihan.

Gangguan Lembut
ERROR 404

Skrin Ralat

Buat halaman ralat yang menarik perhatian dengan rasa gangguan teknikal.

Gangguan Sistem

How to Use

Panduan Pelaksanaan

1
Jana Gangguan Anda

Gunakan kawalan untuk menyesuaikan kesan gangguan anda. Laraskan teks, saiz, keamatan dan warna untuk mencipta rupa yang sempurna.

2
Salin kod yang dijana

Klik butang "Salin CSS" dan "Salin HTML" untuk mengambil kod untuk kesan gangguan anda.

3
Tambah pada Projek Anda

Tampal CSS ke dalam helaian gaya anda dan HTML ke dalam templat anda di mana anda mahu kesannya muncul.

4
Sesuaikan Lagi

Ubah suai masa, warna atau kedudukan animasi dalam CSS untuk memperhalusi kesan untuk keperluan reka bentuk khusus anda.

Soalan Lazim

Adakah ini serasi dengan semua penyemak imbas?

The glitch effect uses modern CSS features (CSS animations and text-shadow) which are supported in all modern browsers. Internet Explorer does not fully support these features.

Bolehkah saya menggunakan ini secara komersial?

Ya, kod yang dijana adalah percuma untuk kegunaan peribadi dan komersial. Tiada atribusi diperlukan.

Bagaimanakah cara saya melaraskan keamatan gangguan?

Gelangsar keamatan mengawal kelajuan animasi dan jarak bayang-bayang teks. Nilai yang lebih tinggi mencipta kesan gangguan yang lebih ketara.

Bolehkah saya menggunakan ini dengan fon saya sendiri?

Benar! Penjana menyediakan kod kesan gangguan teras. Anda boleh menggunakannya pada mana-mana teks menggunakan fon pilihan anda dengan mengubah suai sifat fon CSS.

Mengapa kesan gangguan tidak berfungsi di laman web saya?

Pastikan CSS dan HTML anda dilaksanakan dengan betul. Elemen mesti mempunyaidata-textyang sepadan dengan teks yang boleh dilihat. Semak juga sebarang konflik CSS yang mungkin mengatasi gaya gangguan.

About This Tool

Penjana Kesan Teks Glitch CSS ini membolehkan anda mencipta kesan gangguan yang menakjubkan dan boleh disesuaikan untuk projek web anda. Sesuai untuk menambah sentuhan futuristik yang tegang pada tajuk, logo atau mana-mana elemen teks.

Ciri-ciri utama

Boleh Disesuaikan Sepenuhnya

Laraskan setiap aspek kesan gangguan agar sepadan dengan visi reka bentuk anda.

Keluaran Kod Bersih

Dapatkan CSS dan HTML yang diformat dengan baik dan sedia pengeluaran yang boleh anda sepadukan dengan mudah.

Pratonton Langsung

Lihat dengan tepat bagaimana kesan gangguan anda akan kelihatan semasa anda membuat pelarasan.

Reka Bentuk Responsif

Kesan gangguan yang dijana berfungsi dengan indah merentas semua saiz skrin.

Eksport SVG

Muat turun teks gangguan anda sebagai SVG untuk digunakan dalam alat reka bentuk lain.

Kawalan Warna

Pilih warna tersuai untuk teks asas dan tindanan gangguan anda.

Dicipta dengandan teknologi web moden. Tiada perpustakaan JavaScript diperlukan - hanya sihir CSS tulen.

Related Tools