Δημιουργήστε ένα κινούμενο αποτέλεσμα κειμένου ατμού

Feb 2, 2026

πως να

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

Να πάρει το Αρχεία έργου Για να βοηθήσετε να ακολουθήσετε αυτό το σεμινάριο.

01. Ξεκινήστε το έγγραφο HTML

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

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; κεφάλι & gt;
& lt; τίτλος & gt; blur text & lt; / τίτλος & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
  *** Βήμα 2 εδώ
& lt; / Body & GT;
& lt; / html & gt;

02. Περιεχόμενο HTML

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

 & lt; h2 & gt;
  Η πειθαρχία προέρχεται από
  & lt; ul class = "blur" & gt;
  & lt; li & gt · δέσμευση & lt; / li & gt;
  & lt; li & gt; επιμονή & lt; / li & gt;
  & lt; li & gt; lovication & lt; / li & gt;
  & lt; li & gt; εκπαίδευση & lt; / li & gt;
  & lt; li & gt; and lt; / li & gt;
  & lt; li & gt; / lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Αυτοματοποιημένη καθυστέρηση κινούμενων σχεδίων

Δημιουργήστε ένα νέο αρχείο που ονομάζεται 'Code.js'. Κάθε στοιχείο μέσα στο δοχείο θολώματος πρέπει να παρουσιάζεται τρία δευτερόλεπτα μετά το προηγούμενο στοιχείο. Το Javascript χρησιμοποιείται για την αυτοματοποίηση της εφαρμογής μοναδικών χαρακτηριστικών CSS. Το πρώτο βήμα είναι να επιλέξετε όλα τα στοιχεία πρώτου επιπέδου μέσα στο δοχείο θολώματος - αφού φορτωθεί η σελίδα.

 window.addeventListener ("φορτίο", λειτουργία () {
  var nodes = document.queryselectorall ("blur & gt; *");
  *** Βήμα 4 εδώ
}) ·

04. Αριθμός δευτερολέπτων

Ένας βρόχος «για» χρησιμοποιείται για να αναφέρει κάθε στοιχείο που επιστρέφεται στη μεταβλητή «κόμβων» στο προηγούμενο βήμα. Ο μετρητής ευρετηρίου του βρόχου «για» χρησιμοποιείται για τον υπολογισμό του αριθμού των δευτερολέπτων για την εκχώρηση στο χαρακτηριστικό καθυστέρησης κίνησης. Ως αποτέλεσμα, κάθε στοιχείο έχει καθυστέρηση που είναι τρία δευτερόλεπτα περισσότερο από το προηγούμενο στοιχείο.

 για (var i = 0, i & lt; nodes.length, i ++) {
  κόμβοι [i] .Style.animationDelay = (i * 3) + "s";
}

05. CSS θολούρα

Δημιουργήστε ένα νέο αρχείο που ονομάζεται 'Styles.css'. Το πρώτο βήμα για τον καθορισμό των κανόνων παρουσίασης CSS ξεκινά κάθε ένα από τα αντικείμενα κειμένου ως αόρατα. Ένα animation που ονομάζεται «AnimationBlur» εφαρμόζεται επίσης ότι θα ζωντανεύει το στοιχείο σε προβολή σε μια διάρκεια πέντε δευτερολέπτων. Η λειτουργία κινούμενων σχεδίων πρέπει να ρυθμιστεί στα «προς τα εμπρός» έτσι ώστε να σταματάει στο τελευταίο του πλαίσιο.

. Blur & GT; * {
  αδιαφάνεια: 0;
  Animation: animateblur 5s προς τα εμπρός?
}

06. Ξεκινήστε την κινούμενη εικόνα

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

 @Keyframes animateblur {
  από {
  αδιαφάνεια: 1;
  Κείμενο-Σκιά: 0 0 1em RGBA (0,0,0, .5);
  Χρώμα: RGBA (0,0,0,0);
  }
    *** Βήμα 7 εδώ
}

07. Τελικό πλαίσιο κινούμενων εικόνων

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

 έως {
  αδιαφάνεια: 1;
  Κείμενο-σκιά: 0 0 0px RGBA (0,0,0,0);
  Χρώμα: # 000;
}

Αυτό το άρθρο εμφανίστηκε αρχικά στο περιοδικό Web Designer. Εγγραφείτε εδώ .

Θυμηθείτε - σκεφτείτε πάντα τον χρήστη

Generate - the conference for web designers

Κατά την εισαγωγή φανταχτερά αποτελέσματα σε μια σελίδα που πρέπει να έχει ένα σκοπό, πρέπει να σκεφτείτε την εμπειρία του χρήστη.Και αυτός είναι ο ανεξάρτητος προγραμματιστής UI Front-end Ui Sara Soueidan θα αποκαλυφθεί στη «χρήση CSS (και SVG) για το καλό της UX» Δημιουργία Λονδίνου 2018 .

Στην ομιλία της πρόκειται να δείξει ένα ευρύ φάσμα δυνατοτήτων που προσφέρει η CSS να βελτιώσει τη συνολική εμπειρία των χρηστών του UI σας, χρησιμοποιώντας CSS (με ψεκασμούς SVG και JS εδώ και εκεί).

Βεβαιωθείτε ότι δεν χάνετε. Πάρτε το εισιτήριό σας τώρα.

Σχετικά Άρθρα:

Δημιουργήστε ένα φαινόμενο κειμένου με το JavaScript
Δημιουργήστε ένα λαμπερό αποτέλεσμα κειμένου νέον
Πώς να κάνετε το κείμενο να καθιστούν τέλεια

Δημιουργήστε ένα κινούμενο αποτέλεσμα κειμένου ατμού

01. Ξεκινήστε το έγγραφο HTML

02. Περιεχόμενο HTML

03. Αυτοματοποιημένη καθυστέρηση κινούμενων σχεδίων

04. Αριθμός δευτερολέπτων

05. CSS θολούρα

06. Ξεκινήστε την κινούμενη εικόνα

07. Τελικό πλαίσιο κινούμενων εικόνων

Θυμηθείτε - σκεφτείτε πάντα τον χρήστη

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

Εικονογράφηση χάρτη: Οδηγός βήμα προς βήμα

Πώς να σχεδιάσετε με τα σχήματα CSS: Εισαγωγή

Πώς να οικοδομήσουμε μια διασύνδεση Chatbot

Πώς να δημιουργήσετε ένα redshift πληρεξούσιο στον κινηματογράφο 4D

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

Δημιουργήστε μια προσαρμοσμένη βούρτσα αυτοκόλλητου στην περιοχή

Επιταχύνετε την 3D μοντελοποίηση

Δημιουργήστε ένα γούνινο 3D χαρακτήρα από το μηδέν

Κατηγορίες