Make It Blink HTML -opetusohjelma - Kuinka käyttää Blink-tagia koodiesimerkkeineen

Verkon aikaisempina päivinä HTML-elementit, kuten vilkkumistunniste, olivat natiiveja tapoja lisätä animaatioefektejä verkkosivun elävöittämiseksi. Kuinka voimme käyttää näitä animaatioita tänään lisätä heijastuksia verkkosivustoihimme ja sovelluksiimme?

  • Mikä on HTML-tunniste vilkkuu?
  • Kuinka käytät vilkkutunnistetta?
  • Voitko silti käyttää vilkkuvaa tagia?
  • Vilkkuvan tunnisteen luominen CSS-animaatioilla

Mikä on HTML-tunniste vilkkuu?

Vilkkuva tunniste ( ) on vanhentunut HTML-tunniste, joka saa tagin sisällön hitaasti vilkkumaan.

Tämä yhdessä joidenkin muiden vanhentuneiden tunnisteiden, kuten telttatagin ( ), kanssa, oli helppo tapa lisätä yksinkertaisia ​​animaatioefektejä sivustoosi.

Kuinka käytät vilkkutunnistetta?

Koska vilkkuva tunniste oli yksinkertainen HTML-elementti, käytät sitä suoraan sisältösi mukaisesti.

Jos esimerkiksi haluat, että blink-182: ssa vilkkuu sana "vilkkuu", kirjoitat seuraavan HTML: n:

blink-182

Voitko silti käyttää vilkkuvaa tagia?

Kuten olet ehkä huomannut yllä olevassa gifissä, tämä tunniste on vanhentunut.

Tämä tarkoittaa, että et voi käyttää itse vilkkuvaa HTML-tagia. Sen ei kuitenkaan pidä estää meitä tekemästä sitä uudestaan ​​koko vilkkuvassa kirkkaudessaan.

Huomaa: Blink-tagi poistettiin käytöstä esteettömyysongelmien vuoksi. Suorita tutkimuksesi ennen kuin yrität käyttää ratkaisua, jolla on sama vaikutus, koska meidän kaikkien pitäisi pyrkiä tekemään projekteistamme mahdollisimman osallistavia.

Vilkkuvan tunnisteen luominen CSS-animaatioilla

Nykypäivän verkkokehitysmaailmassa animaatioita hoidetaan yleensä CSS: llä tai JavaScriptillä. CSS-animaatioiden avulla voimme luoda vilkkuvan tunnisteen uudelleen muutamalla rivillä ja palata liiketoimintaan.

Seuraavan CSS: n avulla:

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

Voit lisätä .blinkluokan mihin tahansa HTML-elementtiin, jotta se vilkkuu.

blink-182

Vilkkuvan tunnisteen nykyaikaistaminen

Tämä on vuosi 2020, entä jos haluaisimme jotain sujuvampaa?

Hyvin aloitettava, voimme saada animaation haalistumaan poistamalla stepsanimaation määritelmistä.

.blink { animation: blink 1s infinite; } 

Tai mitä jos haluaisimme saada sen haalistumaan kuin sci-fi-vaikutus?

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

Tai jopa mukava kasvaa ja haalistua.

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

Animaatioiden hallinta CSS: llä

Vaikka et ehkä pysty käyttämään vilkkumistunnistetta, sinulla on silti paljon vaihtoehtoja. CSS tarjoaa runsaasti animaatiovaihtoehtoja luonnollisesti, joten haluatko luoda uudelleen suosikki HTML-harrastuksesi tai luoda Alien-otsikkosarjan, mahdollisuudet ovat käytännössä rajattomat.

Seuraa minua saadaksesi lisää Javascriptiä, UX: ää ja muita mielenkiintoisia asioita!

  • ? Seuraa minua Twitterissä
  • ? ️ Tilaa Youtube
  • ✉️ Rekisteröidy uutiskirjeeseen