Background Image

Эффект пульсации или мерцания на CSS3

Script

by — Category Script on

Данный скрипт содержит всего два шага:

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
Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Эффект "живого фото" на CSS3

    Эффект "живого фото"...

    "Живые" фото стали достаточно популярны в ...

    View More
    0 640 17:48
    Как придать изображению 3d эффект?

    Как придать изображению 3d эфф...

    Небольшой код, который может пригодится в портфолио ...

    View More
    0 664 11:48
    Фиксированная навигация на CSS3 и jQuery

    Фиксированная навигация на CSS...

    Фиксированная навигация, которой пользователь сможет...

    View More
    0 1012 12:35
    Крутой эффект при наведении на фото

    Крутой эффект при наведении на...

    В уроке речь пойдет о простых, но необычных эффектах...

    View More
    1 640 13:58
Метки: CSS3, effect, Pulse
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu