Athari ya Maandishi ya CSS Glitch

Unda athari nzuri za glitch kwa maandishi yako na jenereta hii shirikishi. Inafaa kwa cyberpunk, michezo ya kubahatisha, au muundo wowote unaohitaji mwonekano huo wa siku zijazo.

Glitch Generator

Mipangilio ya Maandishi

60px
5

Chaguzi za Kuuza nje

Muhtasari wa Moja kwa Moja

Athari ya Glitch
Msimbo uliozalishwa
/* 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

Mtindo wa Cyberpunk

Inafaa kwa majina ya mchezo, mabango, na kitu chochote kinachohitaji makali hayo ya siku zijazo.

Hitilafu kali
HACKED

Urembo wa Hacker

Unda mwonekano wa kuingilia, usiofanya kazi kwa miundo yenye mandhari ya usalama.

Hitilafu kali
MCHEZO WA RETRO

Michezo ya Retro

Mtindo wa mchezo wa Nostalgic wa miaka ya 80/90 na msokoto wa kisasa wa glitch.

Hitilafu ya kati
BROKEN

Hitilafu ya Dijiti

Iga onyesho la dijiti lililoharibika au lililoharibiwa.

Hitilafu ya machafuko
SUBTLE

Hitilafu ya hila

Athari iliyosafishwa zaidi ya glitch kwa miundo ya kitaalam ambayo inahitaji kidokezo cha makali.

Hitilafu laini
ERROR 404

Skrini ya Hitilafu

Unda ukurasa wa makosa ya kuvutia na hisia ya hitilafu ya kiufundi.

Hitilafu ya mfumo

How to Use

Mwongozo wa utekelezaji

1
Tengeneza Glitch yako

Tumia vidhibiti kubinafsisha athari yako ya glitch. Rekebisha maandishi, ukubwa, ukubwa na rangi ili kuunda mwonekano mzuri.

2
Nakili msimbo uliozalishwa

Bofya vitufe vya "Nakili CSS" na "Nakili HTML" ili kunyakua msimbo wa athari yako ya hitilafu.

3
Ongeza kwenye mradi wako

Bandika CSS kwenye karatasi yako ya mtindo na HTML kwenye templeti yako ambapo unataka athari ionekane.

4
Geuza kukufaa zaidi

Rekebisha nyakati, rangi, au nafasi za uhuishaji, au nafasi katika CSS ili kurekebisha athari kwa mahitaji yako mahususi ya muundo.

Maswali Yanayoulizwa Mara Kwa Mara

Je, hii inaendana na vivinjari vyote?

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.

Je, ninaweza kutumia hii kibiashara?

Ndiyo, msimbo unaozalishwa ni bure kwa matumizi ya kibinafsi na ya kibiashara. Hakuna sifa inayohitajika.

Ninawezaje kurekebisha ukubwa wa glitch?

Kitelezi cha nguvu hudhibiti kasi ya uhuishaji na umbali wa vivuli vya maandishi. Maadili ya juu huunda athari ya glitch iliyotamkwa zaidi.

Je, ninaweza kutumia hii na fonti zangu mwenyewe?

Kabisa! Jenereta hutoa msimbo wa athari ya msingi ya glitch. Unaweza kuitumia kwa maandishi yoyote kwa kutumia fonti unayopendelea kwa kurekebisha sifa za fonti za CSS.

Kwa nini athari ya glitch haifanyi kazi kwenye wavuti yangu?

Hakikisha kuwa CSS na HTML yako inatekelezwa kwa usahihi. Kipengele lazima kiwe nadata-textsifa inayolingana na maandishi yanayoonekana. Pia angalia migogoro yoyote ya CSS ambayo inaweza kuwa inashinda mitindo ya glitch.

About This Tool

Jenereta hii ya Athari ya Maandishi ya CSS Glitch hukuruhusu kuunda madoido ya kushangaza, yanayoweza kugeuzwa kukufaa kwa miradi yako ya wavuti. Ni kamili kwa kuongeza mguso mkali, wa siku zijazo kwa vichwa, nembo, au kipengele chochote cha maandishi.

Sifa muhimu

Inaweza kubinafsishwa kikamilifu

Rekebisha kila kipengele cha athari ya glitch ili kuendana na maono yako ya muundo.

Pato safi la Msimbo

Pata CSS na HTML iliyoumbizwa vizuri, iliyo tayari kwa uzalishaji ambayo unaweza kuunganisha kwa urahisi.

Muhtasari wa Moja kwa Moja

Tazama jinsi athari yako ya glitch itaonekana unapofanya marekebisho.

Ubunifu msikivu

Athari za glitch zinazozalishwa hufanya kazi kwa uzuri katika saizi zote za skrini.

Usafirishaji wa SVG

Pakua maandishi yako ya hitilafu kama SVG kwa matumizi katika zana zingine za kubuni.

Udhibiti wa Rangi

Chagua rangi maalum kwa maandishi yako ya msingi na vifuniko vya glitch.

Imeundwa nana teknolojia za kisasa za wavuti. Hakuna maktaba za JavaScript zinazohitajika - uchawi safi wa CSS tu.

Related Tools

Jenereta ya Mpito ya CSS3

Mpito laini wa opacity

Tengeneza Mabadiliko ya CSS3 kwa Urahisi

Zana yenye nguvu na angavu ya kuunda mabadiliko changamano ya CSS3 bila kuandika msimbo. Taswira ya mabadiliko katika muda halisi na unakili CSS inayozalishwa ili utumie katika miradi yako.

Sass kwa Kigeuzi cha CSS

Badilisha msimbo wako wa Sass kuwa CSS. Haraka, rahisi, na salama.

RGB hadi Pantone

Badilisha rangi za RGB za dijiti hadi sawa na Pantone® zilizo karibu zaidi

Mhariri wa JSON

Hariri JSON Kubwa kwa Urahisi - Umeme Haraka na Laini

Unda gradients nzuri za CSS bila kujitahidi

Tengeneza gradients nzuri za mstari, radial, na koni ukitumia kiolesura chetu angavu. Nakili msimbo wa CSS na uitumie katika miradi yako papo hapo.