Πώς να κωδικοποιήσετε εφέ έξυπνων κειμένων με CSS

Sep 12, 2025

πως να

[Εικόνα: μεσαίο παιδί]

Οι συνδέσεις ανατροπής είναι ένας πολύ καλός τρόπος για να τραβήξετε την προσοχή ενός χρήστη, ειδικά αν κάνουν κάτι ασυνήθιστο ή πρωτότυπο. Το μεσαίο παιδί έχει μεγάλη επίδραση, σπάνια δει αλλού, που συλλαμβάνει κάθε γράμμα και τους χωρίζει με κινούμενα σχέδια, η οποία κλωτσάει όταν ο επισκέπτης κυμαίνεται πάνω από τη λέξη. Το κινούμενο σχέδιο βοηθά στη μεταφορά του παιχνιδιού του Sandwich Brand.

Σε αυτό το άρθρο, σας δείχνουμε πώς να αναδημιουργήσετε την επίδραση στον ιστότοπό σας. Για περισσότερη έμπνευση, ρίξτε μια ματιά στον οδηγό μας για το Τα καλύτερα παραδείγματα κινούμενων σχεδίων CSS (με οδηγίες σχετικά με τον τρόπο κώδικα τους). Για κάτι λίγο διαφορετικό, δοκιμάστε μια κορυφή οικοδόμος ιστότοπου ή την επιλογή των καλύτερων αποθήκευση σύννεφων . Και αν κάνετε τον ιστότοπό σας πιο περίπλοκο, βεβαιωθείτε ότι έχετε web hosting είναι στο σημείο.

01. Επίδραση κειμένου ανατροπής

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

 & lt; div class = "wrapper" & gt;
& lt; div class = "word" & gt; breakfast & lt; / div & gt;
& lt; / div & gt;

02. Δημιουργία CSS

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

 Σώμα {
Πλάτος: 100%.
Ύψος: 100%.
Περιθώριο: 0;
Padding: 0;
}
.Wrapper {
Εμφάνιση: Πλέγμα;
Ύψος: 100%.
}

03. Τοποθετήστε τη λέξη

ο λέξη κέντρα κέντρων τη λέξη στο πλέγμα. Οποιοδήποτε κείμενο που δίνεται λέξη Η τάξη μπορεί να έχει εφαρμοστεί. ο πάνω Η τάξη πρόκειται να εφαρμοστεί σε κάθε άλλη επιστολή και αυτά θα κινηθούν προς τα πάνω.

. {
Μέγεθος γραμματοσειράς: 3em;
Περιθώριο: Αυτόματο αυτοκίνητο.
}

.
{
Οθόνη: Inline-Block?
Μετασχηματισμός: Translate3d (0px, 0px, 0px)
Περιστροφή (0deg);
Μετάβαση: όλα τα 0,5s ευκολία-in-out.
}

04. Πάνω και πάνω

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

.
{
Οθόνη: Inline-Block.
Μετασχηματισμός: Translate3d (0px, 0px, 0px)
Περιστροφή (0deg);
Μετάβαση: όλα τα 0,5s ευκολία-in-out.
}

: hover .Up
{
Μετασχηματισμός: Translate3d (0px, -8px, 0px)
Περιστροφή (12deg);
Χρώμα: # 058B05
}

05. αιωρείται κάτω

Όταν ο χρήστης κινείται πάνω από το κείμενο, η κάτω τάξη μετακινεί το κείμενο προς τα κάτω. Αργότερα στο JavaScript το κείμενο θα χωριστεί σε ξεχωριστά διαστήματα με τις τάξεις που προστίθενται αυτόματα σε εναλλακτικά συστήματα.

.: Hover.
Μετασχηματισμός: Translate3d (0px, 8px, 0px)
Περιστροφή (-12deg);
Χρώμα: # 058B05;
}

06. Αυτόματο για τους ανθρώπους

Είναι ένα κομμάτι μιας ταλαιπωρίας να πρέπει να βάλει κάθε γράμμα σε εναλλασσόμενους χώρους με διαφορετικές τάξεις, οπότε θα αυτοματοποιήσουμε τη διαδικασία με τη λήψη javascript για να αναρωτηθεί ο επιλογέας και να πάρετε κάθε γράμμα. Εδώ το οδός Η μεταβλητή αρπάζει το τρέχον γράμμα καθώς βρόχους μέσω του κειμένου.

 & lt; script & gt;
var στοιχεία = document.queryselectorall
('.λέξη');
για (var i = 0, l = elements.length.L
& lt; μεγάλο; i ++) {
var str = στοιχεία [i] .TextContent;
στοιχεία [i] .Innerhtml = '';

07. Προσθέστε εναλλασσόμενες τάξεις

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

Μπορείτε να δείτε το αποτέλεσμα σε δράση στο Middle Child Website .

 για (var j = 0, ll = str.length, j
& lt; ll; j ++) {
var spn = έγγραφο.createelement ('span');
στοιχεία [i] .AppendChild (SPN);
SPN.TextContent = str [j];
Αφήστε το POS = (J% 2); 'πάνω κάτω';
SPN.ClassList.Add (POS);
}
 }
& lt; / script & gt;

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράστε τεύχος 286 ή Εγγραφείτε .

Διαβάστε περισσότερα:

Προσθέστε φίλτρα SVG με CSS
Πώς να σχεδιάσετε με τα σχήματα CSS: Εισαγωγή
5 δροσερά γεννήτριες πλέγματος CSS

Πώς να κωδικοποιήσετε εφέ έξυπνων κειμένων με CSS

01. Επίδραση κειμένου ανατροπής

02. Δημιουργία CSS

03. Τοποθετήστε τη λέξη

04. Πάνω και πάνω

05. αιωρείται κάτω

06. Αυτόματο για τους ανθρώπους

07. Προσθέστε εναλλασσόμενες τάξεις

πως να - Τα πιο δημοφιλή άρθρα

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

Πώς να αφαιρέσετε τις ρυτίδες στο Photoshop

Chiaroscuro Art: Ένας οδηγός βήμα προς βήμα

Ξεκινήστε με την Adobe Dimension CC

4 Συμβουλές για τη βελτίωση της απόδοσης της σελίδας σας

Δημιουργήστε σχέδια έτοιμων παιχνιδιών χρησιμοποιώντας ζωγράφο ουσίας

Σχεδιάστε ακριβή οστά και μυς

Πώς να συνδυάσετε τους γλυπτικούς και ζωγραφισμένους χάρτες μετατόπισης

Κατηγορίες