Få det til at blinke HTML-vejledning - Sådan bruges Blink-tagget med kodeeksempler

I de tidligere dage af Internettet var HTML-elementer som blink-tag indfødte måder at tilføje nogle animationseffekter for at opleve en webside. Hvordan kan vi bruge disse animationer i dag til at tilføje flare til vores websteder og apps?

  • Hvad blinker HTML-koden?
  • Hvordan bruger du blinkmærket?
  • Kan du stadig bruge blinkmærket?
  • Genskaber blinkmærket med CSS-animationer

Hvad blinker HTML-koden?

Blink-tagget ( ) er et forældet HTML-tag, der får indholdet af dette tag langsomt til at blinke.

Dette sammen med nogle andre forældede tags som markeringsmærket ( ) var en nem måde at tilføje enkle animationseffekter til dit websted.

Hvordan bruger du blinkmærket?

At være, at blink-tagget var et simpelt HTML-element, ville du bruge det lige i tråd med dit indhold.

For eksempel, hvis du ville have ordet "blink" i blink-182 til at blinke, ville du skrive følgende HTML:

blink-182

Kan du stadig bruge blinkmærket?

Som du måske har bemærket i gifen ovenfor, er dette tag forældet.

Dette betyder, at du ikke kan bruge selve det blinkende HTML-tag. Det bør dog ikke forhindre os i at genoprette det i al sin blinkende herlighed.

Bemærk: Blink-tagget blev udfaset på grund af problemer med tilgængelighed. Foretag din undersøgelse, inden du prøver at bruge en løsning, der giver den samme effekt, da vi alle skal gøre en indsats for at gøre vores projekter så inkluderende som muligt.

Genskaber blinkmærket med CSS-animationer

I nutidens webudviklingsverden håndteres animationer generelt med CSS eller JavaScript. Ved hjælp af CSS-animationer kan vi genskabe vores blink-tag med et par linjer og være tilbage i erhvervslivet.

Med følgende CSS:

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

Du kan tilføje .blinkklassen til ethvert HTML-element for at få det til at blinke.

blink-182

Modernisering af blink-mærket

Dette er 2020, hvad hvis vi ville have noget lidt glattere?

Nå for at starte kan vi få animationen til at falme ved at fjerne de stepsfra animationsdefinitionerne.

.blink { animation: blink 1s infinite; } 

Eller hvad hvis vi ønskede at få det til at falme ud som en sci-fi-effekt?

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

Eller endda en dejlig vokse og falme effekt.

.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; } } 

At tage kontrol over animationer med CSS

Selvom du muligvis ikke kan bruge blink-mærket, har du stadig mange muligheder. CSS giver masser af animationsindstillinger indbygget, så uanset om du vil genskabe dit foretrukne HTML-tidsfordriv eller genskabe Alien-titelsekvensen, er mulighederne næsten uendelige.

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev