Kuinka saada teksti vilkkumaan verkkosivullani

Aiemmat HTML-versiot ja Internet-selaimet tukivat -tunnistetta. Sitä käytettiin luomaan vilkkuvaa tekstiä verkkosivuille. Nykyään tämä tunniste on vanhentunut, eikä sitä enää tueta missään yleisimmissä selaimissa. Luo vilkkuva teksti käyttämällä joko alla olevaa CSS- tai JavaScript-esimerkkiä.

CSS-esimerkki

Luo CSS-blink-luokka kopioimalla alla oleva CSS-koodi verkkosivusi päähän.

<style type="text/css">
<!--
/* @group Blink */
.blink {
 -webkit-animation: blink .75s linear infinite;
 -moz-animation: blink .75s linear infinite;
 -ms-animation: blink .75s linear infinite;
 -o-animation: blink .75s linear infinite;
 animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
@-moz-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
@-ms-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
@-o-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
@keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
/* @end */
-->
</style>

Kun yllä oleva CSS-koodi on lisätty, voit käyttää “blink”-luokkaa missä tahansa elementissä. Alla on blink-luokkaa käyttävä kappaletunniste.

<p class="tab blink">example of blinking text using CSS.</p>

Kun noudatat kaikkia yllä olevia vaiheita, saat vilkkuvan tekstin alla olevan kuvan mukaisesti.

Esimerkki vilkkuvasta tekstistä CSS:n avulla.

JavaScript esimerkki

Luo JavaScript-vilkkutoiminto kopioimalla alla oleva JavaScript-koodi sivusi päähän.

<script>
function blinker() {
 $('.blinking').fadeOut(500);
 $('.blinking').fadeIn(500);
}
setInterval(blinker, 1000);
</script>

Kun yllä oleva JavaScript on lisätty sivullesi, voit kutsua funktiota lisäämällä “vilkkuvan” luokan mihin tahansa elementtiin. Alla on kappaletunniste, jossa käytetään vilkkuvaa luokkaa.

<p class="blinking">Example of blinking text using JavaScript.</p>

Kun noudatat kaikkia yllä olevia vaiheita, saat vilkkuvan tekstin alla olevan kuvan mukaisesti. Voit säätää JavaScriptin arvoja muuttaaksesi vilkkuvan tekstin ulkoasua.

Esimerkki vilkkuvasta tekstistä JavaScriptin avulla.