CSS3 uvítání na webu – jemně blikající ikonka

I takováto elegantní ikonka se dá vytvořit pomocí CSS3 animací. Pokud naopak chcete, aby bila návštěvníka do očí, stačí snížit čas průběhu animace ve zvýrazněných částech kódu:

Kód:

<style>@keyframes vitejte { 0%{ background-color: #f8a263; } 50% {background-color: #2ea2cc;} 100% { background-color: #f8a263; } } @-webkit-keyframes vitejte { 0%{ background-color: #f8a263; } 50% {background-color: #2ea2cc;} 100% { background-color: #f8a263; } } .vitejte { animation: vitejte 4s (měnitelný čas) linear infinite; -webkit-animation: vitejte 7s (měnitelný čas) linear infinite; display: inline-block; padding: 2px }</style>

<div class=“vitejte“>Vítejte na webu<br>HTML Kody</div>

Ukázka: