Πώς να δημιουργήσετε κείμενο που αναβοσβήνει/αναβοσβήνει με CSS

' στοιχείο για να καθορίσετε μια επικεφαλίδα μεταξύ του στοιχείου div:

---

---

< div τάξη = 'στυλ αναλαμπής' >
< h3 > Linux h3 >
div >

Ας προχωρήσουμε στη διαμόρφωση του στυλ των στοιχείων HTML.

Στυλ 'στυλ αναβοσβήνει' div

.στυλ αναβοσβήνει {
φόντο: rgb ( 0 , 0 , 0 ) ;
}

Το CSS ' Ιστορικό Η ιδιότητα ' εφαρμόζεται στο στοιχείο div με την κλάση ' στιλ αναλαμπής '.

Στοιχείο στυλ 'h3'.

h3 {
text-align: κέντρο;
γραμματοσειρά-οικογένεια: Verdana;
χρώμα: #ffc310;
animation: αναβοσβήνει κείμενο 1.9s linear infinite.
μέγεθος γραμματοσειράς: 6em;
}

Η HTML '

Το στοιχείο είναι διακοσμημένο με τις ακόλουθες ιδιότητες CSS:

• ' στοίχιση κειμένου Η ιδιότητα ' ορίζει τη στοίχιση του κειμένου του στοιχείου.
• ' γραμματοσειρά-οικογένεια ” ορίζει ένα στυλ γραμματοσειράς για το κείμενο.
• ' χρώμα ' χρησιμοποιείται για να χρωματίσει το κείμενο του στοιχείου.
• ' κινουμένων σχεδίων ” είναι η συντομογραφία που καθορίζει το όνομα της κινούμενης εικόνας, τη διάρκεια της κινούμενης εικόνας, τη συνάρτηση χρονισμού κίνησης και τις τιμές ιδιοτήτων animation-iteration-count.
• ' μέγεθος γραμματοσειράς Η ιδιότητα προσαρμόζει το μέγεθος της γραμματοσειράς κυρίως σε μονάδες 'px' και 'em'.

Εφαρμόστε τον κανόνα '@keyframe' σε κινούμενη εικόνα 'blink-text'.

@ βασικά καρέ που αναβοσβήνουν {
0 % {
αδιαφάνεια: 0 ;
}
πενήντα % {
αδιαφάνεια: ένας ;
}
100 % {
αδιαφάνεια: 0 ;
}

Το όνομα του κινούμενου σχεδίου ' αναβοσβήνει-κείμενο ' καθορίζεται στην ιδιότητα κινούμενων εικόνων. Ο ' @keyframe Ο κανόνας προστίθεται πριν από το όνομα της κινούμενης εικόνας που υποδηλώνει τη συμπεριφορά της κινούμενης εικόνας σε διαφορετικά διαστήματα όπως αναφέρεται παρακάτω:

• στο ' 0% κινούμενη εικόνα, η αδιαφάνεια του κειμένου ορίζεται ως 0.
• στο ' πενήντα% κινούμενη εικόνα, η αδιαφάνεια του κειμένου έχει οριστεί σε 1.
• στο ' 100% κινούμενη εικόνα, η αδιαφάνεια του κειμένου έχει οριστεί στο 0.

Παραγωγή

Παράδειγμα 2: Δημιουργία πολλαπλού κειμένου που αναβοσβήνει

Για να δημιουργήσετε πολλά κείμενα που αναβοσβήνουν σε HTML, ακολουθήστε τα παρακάτω βήματα:

• Πρώτα, τοποθετήστε ένα '
  'στοιχείο και αντιστοιχίστε του μια κλάση' text-div '.
• Στη συνέχεια, προσθέστε δύο '

  ' στοιχεία για να συμπεριλάβετε κάποιο κείμενο.

• Στο πρώτο στοιχείο '

  ' εκχωρείται μια κλάση ' αναβοσβήνει '.

• Στο δεύτερο ανατίθενται δύο τάξεις, ' αναβοσβήνει ' και ' ένας '. Και οι δύο κλάσεις έχουν πρόσβαση στο CSS για τη δήλωση ιδιοτήτων στυλ:

< div τάξη = 'text-div' >
< Π τάξη = 'αναβοσβήνει' > Twinkle Twinkle Π >
< Π τάξη = 'ένα που αναβοσβήνει' > Αστεράκι ** Π >
div >

Τώρα, ρίξτε μια ματιά στην ενότητα CSS για το στυλ του HTML '

” στοιχεία.

Στυλ 'text-div' div

.text-div {
πλάτος: 400 px;
περιθώριο: αυτοκίνητο;
χρώμα φόντου: rgb ( 42 , 49 , 49 ) ;
padding: 8px;
}

Ο ' .text-div ' χρησιμοποιείται για πρόσβαση στο στοιχείο

. Μέσα στις αγκύλες, οι ακόλουθες ιδιότητες CSS εφαρμόζονται στο '.text-div':

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

Κατηγορία «αναβοσβήνει» στυλ

.αναβοσβήνει {
χρώμα: κίτρινο;
μέγεθος γραμματοσειράς: 40 px;
γραμματοσειρά-οικογένεια: cursive;
βάρος γραμματοσειράς: έντονη;
κινούμενα σχέδια: αναβοσβήνει στυλ 0,6 s linear άπειρο?
}

Ο ' .αναβοσβήνει ' χρησιμοποιείται για πρόσβαση στις ετικέτες HTML

. Οι ακόλουθες ιδιότητες υλοποιούνται σε αυτήν την κλάση:

• ' βάρος γραμματοσειράς ' υποδεικνύει το πάχος της γραμματοσειράς.
• Άλλες ιδιότητες εξηγούνται στην παραπάνω ενότητα.

Εφαρμόστε τον κανόνα '@keyframe' σε κινούμενα σχέδια 'σε στυλ που αναβοσβήνει'.

@ βασικά καρέ που αναβοσβήνουν {
0 % {
αδιαφάνεια: 0 ;
}
}

Προσαρμόστε τη συμπεριφορά του ' αναβοσβήνει ' animation χρησιμοποιώντας το ' @keyframe ” κανόνες. Στην αρχή της κινούμενης εικόνας, η αδιαφάνεια του κειμένου θα είναι 0, υποδεικνύοντας το πλήρες επίπεδο διαφάνειας των στοιχείων.

Για να φτιάξετε το animation στο δεύτερο '

'στοιχείο ελαφρώς διαφορετικό, η κλάση' ένας ' δηλώνεται με τα ακόλουθα στυλ κινούμενων εικόνων:

Τάξη στυλ «ένα».

.ένας {
animation: one 1s linear infinite.
}
@ βασικά καρέ ένα {
πενήντα % {
αδιαφάνεια: 0 ;
}
}

Παραγωγή

Έχουμε μάθει αποτελεσματικά πώς να φτιάχνουμε το κείμενο που αναβοσβήνει χρησιμοποιώντας διαφορετικές ιδιότητες στυλ CSS.

συμπέρασμα

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