Данный скрипт содержит всего два шага:
1. Сам CSS код эффекта
CSS
.pulse {
animation-name: pulse;
-webkit-animation-name: pulse;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
50% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
}
Если хотим увеличить или уменьшить мерцание статуса, то можно просто заменить переменные scale( на свои );
2. Ну соответственно html код:
Разметка
<span class="pulse"><img title="В сети" src="/icon/online.png"></span>
Для сайтов uCoz можно использовать условные операторы
<?if($USERNAME$=$_USERNAME$)?><span class="pulse"><img title="В сети" src="/icon/online.png"></span><?else?><img src="/icon/offline.png" title="Не в сети" alt="Не в сети"><?endif?>
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 0 | |