Εκμάθηση του Make It Blink HTML - Πώς να χρησιμοποιήσετε την ετικέτα Blink, με παραδείγματα κώδικα

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

  • Τι είναι η ετικέτα HTML που αναβοσβήνει;
  • Πώς χρησιμοποιείτε την ετικέτα αναλαμπής;
  • Μπορείτε ακόμα να χρησιμοποιήσετε την ετικέτα αναβοσβήνει;
  • Αναδημιουργία της ετικέτας αναλαμπής με κινούμενες εικόνες CSS

Τι είναι η ετικέτα HTML που αναβοσβήνει;

Η ετικέτα αναλαμπής ( ) είναι μια ξεπερασμένη ετικέτα HTML που κάνει το περιεχόμενο αυτής της ετικέτας να αναβοσβήνει αργά.

Αυτό, μαζί με άλλες παρωχημένες ετικέτες, όπως η ετικέτα marquee ( ), ήταν ένας εύκολος τρόπος για να προσθέσετε απλά εφέ κίνησης στον ιστότοπό σας.

Πώς χρησιμοποιείτε την ετικέτα αναλαμπής;

Δεδομένου ότι η ετικέτα αναβοσβήνει ήταν ένα απλό στοιχείο HTML, θα το χρησιμοποιούσατε ακριβώς σύμφωνα με το περιεχόμενό σας.

Για παράδειγμα, εάν θέλετε να αναβοσβήνει η λέξη "blink" στο blink-182, θα γράψετε τον ακόλουθο HTML:

blink-182

Μπορείτε ακόμα να χρησιμοποιήσετε την ετικέτα αναβοσβήνει;

Όπως ίσως έχετε παρατηρήσει στο παραπάνω gif, αυτή η ετικέτα είναι ξεπερασμένη.

Αυτό σημαίνει ότι δεν μπορείτε να χρησιμοποιήσετε την ίδια την ετικέτα HTML που αναβοσβήνει. Ωστόσο, αυτό δεν θα πρέπει να μας εμποδίσει να το ξανακάνουμε σε όλη τη δόξα που αναβοσβήνει.

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

Αναδημιουργία της ετικέτας αναλαμπής με κινούμενες εικόνες CSS

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

Με τα ακόλουθα CSS:

.blink { animation: blink 1s steps(1, end) infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } 

Μπορείτε να προσθέσετε την .blinkκλάση σε οποιοδήποτε στοιχείο HTML για να το κάνετε να αναβοσβήνει.

blink-182

Εκσυγχρονισμός της ετικέτας αναβοσβήνει

Αυτό είναι το 2020, τι γίνεται αν θέλουμε κάτι πιο ομαλό;

Κατ 'αρχάς, μπορούμε να κάνουμε το κινούμενο σχέδιο να ξεθωριάσει αφαιρώντας το stepsαπό τους ορισμούς της κινούμενης εικόνας.

.blink { animation: blink 1s infinite; } 

Ή τι θα θέλαμε αν θέλαμε να το ξεθωριάσουμε σαν εφέ επιστημονικής φαντασίας;

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; color: blue; } } 

Ή ακόμα και ένα ωραίο αποτέλεσμα ανάπτυξης και εξασθένισης.

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; transform: scale(2); } 51% { opacity: 0; transform: scale(0); } 100% { transform: scale(1); opacity: 1; } } 

Λήψη ελέγχου των κινούμενων εικόνων με CSS

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

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; ️ Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου