Učinite da trepće HTML vodič - Kako koristiti blink oznaku s primjerima koda

U ranijim danima weba, HTML elementi poput oznake blink bili su izvorni načini dodavanja nekih efekata animacije za oživljavanje web stranice. Kako danas možemo koristiti te animacije za dodavanje raketa našim web mjestima i aplikacijama?

  • Što je treptanje HTML oznake?
  • Kako se koristi oznaka blink?
  • Možete li i dalje koristiti oznaku blink?
  • Ponovno stvaranje blink oznake s CSS animacijama

Što je treptanje HTML oznake?

Oznaka blink ( ) zastarjela je HTML oznaka zbog koje sadržaj te oznake polako bljeska.

To je, zajedno s nekim drugim zastarjelim oznakama, poput oznake marquee ( ), bio jednostavan način dodavanja jednostavnih efekata animacije na vaše web mjesto.

Kako se koristi oznaka blink?

Budući da je oznaka blink jednostavan HTML element, koristili biste je točno u skladu sa svojim sadržajem.

Na primjer, ako želite da riječ "blink" u blink-182 trepće, napisali biste sljedeći HTML:

blink-182

Možete li i dalje koristiti oznaku blink?

Kao što ste mogli primijetiti u gornjem gifu, ova je oznaka zastarjela.

To znači da ne možete koristiti samu blink HTML oznaku. Međutim, to nas ne bi smjelo spriječiti da je prepravimo u svoj njezinoj trepćućoj slavi.

Napomena: Oznaka Blink zastarjela je zbog nedostupnosti. Molimo vas da istražite prije nego što pokušate upotrijebiti rješenje koje pruža isti učinak, jer bismo se svi trebali potruditi kako bismo svoje projekte učinili što uključivijima.

Ponovno stvaranje blink oznake s CSS animacijama

U današnjem svijetu web razvoja, animacijama se obično rukuje CSS ili JavaScript. Korištenjem CSS animacija možemo stvoriti treptajuću oznaku s nekoliko redaka i vratiti se u posao.

Sa sljedećim CSS-om:

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

Možete dodati .blinkklasu bilo kojem HTML elementu kako bi trepnuo.

blink-182

Modernizacija oznake blink

Ovo je 2020. što ako bismo željeli nešto malo uglađenije?

Pa za početak, animaciju možemo izblijediti uklanjanjem stepsiz definicija animacije.

.blink { animation: blink 1s infinite; } 

Ili što ako bismo htjeli da nestane poput znanstveno-fantastičnog efekta?

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

Ili čak lijep efekt rasta i blijeđenja.

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

Preuzimanje kontrole nad animacijama s CSS-om

Iako možda nećete moći koristiti oznaku treptaja, još uvijek imate puno mogućnosti. CSS izvorno nudi mnoštvo mogućnosti animacije, pa bez obzira želite li ponovno stvoriti svoju omiljenu HTML zabavu ili slijed naslova Alien, mogućnosti su gotovo bezbrojne.

Slijedite me za još Javascripta, UX-a i drugih zanimljivosti!

  • ? Slijedite me na Twitteru
  • ? Pretplatite se na moj Youtube
  • Up Prijavite se za moj bilten