Î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

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

Tutorial Make It Blink HTML Cum se utilizeaza eticheta
Căutarea pe Google a „etichetei intermitente”

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.

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>

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

Tutorial Make It Blink HTML Cum se utilizeaza eticheta
Blink compatibilitate browser tag

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.

Î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>
1611899524 26 Tutorial Make It Blink HTML Cum se utilizeaza eticheta
Efect de clipire HTML CSS

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;
}
1611899524 9 Tutorial Make It Blink HTML Cum se utilizeaza eticheta
Efect de estompare clipire

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;
  }
}
1611899524 504 Tutorial Make It Blink HTML Cum se utilizeaza eticheta
Efectul SF-ului CSS blink fade

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;
  }
}
1611899524 291 Tutorial Make It Blink HTML Cum se utilizeaza eticheta
CSS clipeste efectul de crestere si estompare

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.