Glitch Generator

Ρυθμίσεις

60px
5

Επιλογές εξαγωγής Λήψη

Live Preview

Δημιουργήθηκε εφέ σφάλματος
Code
/* 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

Cyberpunk Style

Ιδανικό για τίτλους παιχνιδιών, αφίσες και οτιδήποτε χρειάζεται αυτό το φουτουριστικό πλεονέκτημα.

Ισχυρή αισθητική Glitch
HACKED

Hacker Δημιουργήστε

μια ενοχλητική, δυσλειτουργική εμφάνιση για σχέδια με θέμα την ασφάλεια.

Έντονο Glitch
ΡΕΤΡΌ ΠΑΙΧΝΊΔΙ

Ρετρό παιχνίδι

Νοσταλγικό στυλ παιχνιδιού της δεκαετίας του '80 / '90 με μια σύγχρονη συστροφή glitch.

μεσαίου σφάλματος
BROKEN

δυσλειτουργία

Προσομοιώστε μια κατεστραμμένη ή κατεστραμμένη ψηφιακή οθόνη.

Chaotic Glitch
SUBTLE

Subtle Glitch

Ένα πιο εκλεπτυσμένο εφέ δυσλειτουργίας για επαγγελματικά σχέδια που χρειάζονται έναν υπαινιγμό άκρης.

Soft Glitch
ERROR 404

Οθόνη

Δημιουργήστε μια σελίδα σφάλματος που τραβάει την προσοχή με τεχνική αίσθηση σφάλματος.

System Glitch

How to Use

Οδηγός

1
Δημιουργήστε το σφάλμα

Χρησιμοποιήστε τα χειριστήρια για να προσαρμόσετε το εφέ δυσλειτουργίας. Προσαρμόστε το κείμενο, το μέγεθος, την ένταση και τα χρώματα για να δημιουργήσετε την τέλεια εμφάνιση.

2
Αντιγράψτε τον δημιουργημένο κώδικα

Κάντε κλικ στα κουμπιά "Αντιγραφή CSS" και "Αντιγραφή HTML" για να τραβήξετε τον κώδικα για το εφέ δυσλειτουργίας σας.

3
Προσθήκη στο έργο

Επικολλήστε το CSS στο φύλλο στυλ και το HTML στο πρότυπό σας όπου θέλετε να εμφανίζεται το εφέ.

4
Περαιτέρω προσαρμογή Τροποποιήστε

τους χρονισμούς, τα χρώματα ή τις θέσεις κινούμενων εικόνων στο CSS για να ρυθμίσετε με ακρίβεια το εφέ για τις συγκεκριμένες ανάγκες σχεδίασης.

Συχνές Ερωτήσεις

Είναι συμβατό με όλα τα προγράμματα περιήγησης;

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.

Μπορώ να το χρησιμοποιήσω εμπορικά;

Ναι, ο παραγόμενος κώδικας είναι δωρεάν τόσο για προσωπική όσο και για εμπορική χρήση. Δεν απαιτείται απόδοση.

Πώς μπορώ να ρυθμίσω την ένταση του σφάλματος;

Το ρυθμιστικό έντασης ελέγχει την ταχύτητα κίνησης και την απόσταση των σκιών κειμένου. Οι υψηλότερες τιμές δημιουργούν μια πιο έντονο εφέ δυσλειτουργίας.

Μπορώ να το χρησιμοποιήσω με τις δικές μου γραμματοσειρές;

Απόλυτα! Η γεννήτρια παρέχει τον κωδικό εφέ σφάλματος πυρήνα. Μπορείτε να το εφαρμόσετε σε οποιοδήποτε κείμενο χρησιμοποιώντας τη γραμματοσειρά που προτιμάτε τροποποιώντας τις ιδιότητες γραμματοσειράς CSS.

Γιατί δεν λειτουργεί το φαινόμενο δυσλειτουργίας στον ιστότοπό μου;

Βεβαιωθείτε ότι το CSS και το HTML έχουν εφαρμοστεί σωστά. Το στοιχείο πρέπει να έχει έναdata-textχαρακτηριστικό που ταιριάζει με το ορατό κείμενο. Ελέγξτε επίσης για τυχόν διενέξεις CSS που ενδέχεται να παρακάμπτουν τα στυλ δυσλειτουργίας.

About This Tool

Αυτή η γεννήτρια εφέ κειμένου CSS Glitch σάς επιτρέπει να δημιουργείτε εκπληκτικά, προσαρμόσιμα εφέ δυσλειτουργίας για τα έργα ιστού σας. Ιδανικό για να προσθέσετε μια νευρική, φουτουριστική πινελιά σε επικεφαλίδες, λογότυπα ή οποιοδήποτε στοιχείο κειμένου.

Βασικά χαρακτηριστικά

Πλήρως προσαρμόσιμο

Προσαρμόστε κάθε πτυχή του εφέ δυσλειτουργίας ώστε να ταιριάζει με το σχεδιαστικό σας όραμα.

Καθαρή έξοδος κώδικα Αποκτήστε

καλά μορφοποιημένο, έτοιμο για παραγωγή CSS και HTML που μπορείτε εύκολα να ενσωματώσετε.

Ζωντανή προεπισκόπηση Δείτε

ακριβώς πώς θα φαίνεται το εφέ δυσλειτουργίας καθώς κάνετε προσαρμογές.

Ανταποκρινόμενος σχεδιασμός

Τα εφέ δυσλειτουργίας που δημιουργούνται λειτουργούν όμορφα σε όλα τα μεγέθη οθόνης.

Εξαγωγή SVG Κατεβάστε

το κείμενο σφάλματος ως SVG για χρήση σε άλλα εργαλεία σχεδίασης.

Έλεγχος

Επιλέξτε προσαρμοσμένα χρώματα για το βασικό κείμενο και τις επικαλύψεις δυσλειτουργίας.

Δημιουργήθηκε μεκαι σύγχρονες τεχνολογίες ιστού. Δεν απαιτούνται βιβλιοθήκες JavaScript - απλά καθαρή μαγεία CSS.

Related Tools

Μετατροπέας SCSS σε CSS

Μετατρέψτε τον κώδικα SCSS σε CSS. Γρήγορα, εύκολα και με ασφάλεια.

Δημιουργήστε Όμορφες Διαβαθμίσεις CSS Χωρίς Κακό

Δημιουργήστε εκπληκτικές γραμμικές, ακτινικές και κωνικές κλίσεις με τη διαισθητική διεπαφή μας. Αντιγράψτε τον κώδικα CSS και χρησιμοποιήστε τον στα έργα σας αμέσως.

Μετατροπέας γραφίδας σε CSS

Μετατρέψτε τον κώδικα SCSS σε CSS. Γρήγορα, εύκολα και με ασφάλεια.

Μετατροπέας CSS σε SCSS

Μετατρέψτε τον κώδικα CSS σε SCSS με μεταβλητές, ένθεση και πολλά άλλα. Γρήγορα, εύκολα και με ασφάλεια.

Αριθμομηχανή Έκπτωσης

Υπολογίστε τις εκπτώσεις, τις τιμές πώλησης και τις εξοικονομήσεις με τον εύχρηστο εκπτωτικό υπολογιστή μας.

Μετατροπέας τάσης

Μετατροπή ηλεκτρικής τάσης μεταξύ διαφορετικών μονάδων με ακρίβεια και ευκολία