Tutorial Make It Blink HTML – Cum se utilizează eticheta Blink, cu exemple de cod

În zilele anterioare ale web-ului, elementele HTML, cum ar fi eticheta clipire, erau modalități native de a adăuga unele efecte de animație pentru a anima o pagină web. Cum putem folosi aceste animații astăzi pentru a adăuga flare la site-urile și aplicațiile noastre?

• Ce este clipirea etichetei HTML?
• Cum folosiți eticheta de clipire?
• Puteți utiliza în continuare eticheta de clipire?
• Recreerea etichetei clipire cu animații CSS

Ce este clipirea etichetei HTML?

clipi etichetă (<blink>) este o etichetă HTML învechită care face ca conținutul acelei etichete să clipească încet.

Acest lucru, împreună cu alte etichete învechite, cum ar fi marchiză etichetă (<marquee>), au fost o modalitate ușoară de a adăuga efecte de animație simple pe site-ul dvs.

Cum folosiți eticheta de clipire?

Fiind faptul că eticheta de clipire a fost un element HTML simplu, l-ați folosi chiar în conformitate cu conținutul dvs.

De exemplu, dacă doriți ca cuvântul „clipire” din clipire-182 să clipească, ați scrie următorul HTML:

<p>
  <blink>blink</blink>-182
</p>

Puteți utiliza în continuare eticheta de clipire?

Așa cum ați fi observat în giful de mai sus, această etichetă este învechită.

Aceasta înseamnă că nu puteți utiliza eticheta HTML intermitentă în sine. Cu toate acestea, acest lucru nu ar trebui să ne împiedice să-l refacem în toată gloria intermitentă.

Notă: eticheta Blink a fost depreciată din cauza problemelor de accesibilitate. Vă rog faceți-vă cercetările înainte de a încerca să folosim o soluție care să ofere același efect, întrucât ar trebui să facem cu toții un efort pentru ca proiectele noastre să fie cât mai incluzive posibil.

Recreerea etichetei clipire cu animații CSS

În lumea actuală a dezvoltării web, animațiile sunt în general tratate cu CSS sau JavaScript. Folosind animații CSS, putem să ne recreăm eticheta de clipire cu câteva linii și să revenim la afaceri.

Cu următoarele CSS:

.blink {
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Puteți adăuga .blink clasă la orice element HTML pentru a face să clipească.

<p>
  <span class="blink">blink</span>-182
</p>

Modernizarea etichetei clipire

Este anul 2020, ce se întâmplă dacă am dori ceva mai ușor?

Pentru început, putem face ca animația să se estompeze prin eliminarea steps din definițiile animației.

.blink {
  animation: blink 1s infinite;
}

Sau dacă am vrea să facem să se estompeze ca un efect SF?

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}

Sau chiar un efect frumos de creștere și estompare.

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

Preluarea controlului asupra animațiilor cu CSS

Deși este posibil să nu puteți utiliza eticheta de clipire, aveți totuși o mulțime de opțiuni. CSS oferă o mulțime de opțiuni de animație în mod nativ, deci dacă doriți să vă recreați timpul liber HTML preferat sau recreați secvența de titlu Alien, posibilitățile sunt practic nelimitate.