TAG Blink HTML czyli migające napisy

Opublikował użytkownik: ArturData publikacji: 22 maja 2014

Od jakiegoś czasu można zauważyć, że funkcja BLINK mająca na celu wprawić w migotanie jakiegoś zaznaczonego tekstu znika z naszego życia. Dla przypomnienia wygląda ona tak:

<blink> Tekst </blink>

Firefox jest ostatnią przeglądarką, która wraz z wersją numer 23 usunęła niniejszą funkcję. Na szczęście można ją sobie napisać samemu a w zasadzie odtworzyć wykorzystując do tego animacje CSS.

Pierwszym krokiem jest zdefiniowanie samego „migania” w stylach naszej strony. Do tego celu kopiujemy poniższą formułkę:

.blink {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: blink;
}
@keyframes blink {
0% {opacity: 1;}
75% {opacity: 1;}
76% {opacity: 0;}
100% {opacity: 0;}
}

Teraz pozostaje nam poprzez klasę „.blink” (zamiast poprzez TAG) wskazać, który element ma migać:

<p class=”blink”> Migający tekst… </p>
lub
<p> <span class=”blink”> Migający</span> tekst… </p>

Efekt: Migający tekst…