» »

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


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

Данный скрипт очень подойдёт для реалистичности эффекта онлайн или оффлайн статусу пользователя на вашем сайте без использования gif изображений. Так что на темном сайте будет отлично смотреться по визуализация и вам не нужно буде выставлять кнопки. Так как этот скрипт заменит и пользователь будет видеть, кто онлайн и находится на интернет ресурсе. В верхней части страницы возле никнейма пользователей стоит вот такая иконка (видна гостям). Если посмотреть на неё, то она мерцает. При статусе ONline она мерцает зеленым цветом. На ней мерцание заметнее. Дело не в этой ссылке, а в статусе пользователя.

1. Сам 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?>


PS- Данный скрипт очень подойдёт для реалистичности эффекта онлайн/оффлайн статусу пользователя на вашем сайте без использования gif изображений. Пример применения - Страница пользователей. В верхней части страницы возле никнейма стоит вот такая иконка (видна гостям). Если посмотреть на неё, то она мерцает.
06.11.2016 Просмотров: 468 Комментарий: (18)

Поделиться в социальных сетях

Материал разместил

Комментарий: 18
iMadeas
iMadeas 06.11.2016 14:461
0
Для наглядности временно добавили эффект мерцания статусу OFFLINE здесь
Надеюсь кому-нибудь пригодится.
Kosten
Kosten 06.11.2016 16:382
0
iMadeas, приветствую, не могу понять, а что должно мерцать, и ссылка для чего в коде?
iMadeas
iMadeas 06.11.2016 16:563
0
Зачем Вы заменяете изображение? Дело не в этой ссылке, а в статусе пользователя.
Kosten
Kosten 06.11.2016 17:144
0
Все понятно, изменю сейчас.
Kosten
Kosten 06.11.2016 17:245
0
Описание с комментария взял, и в материал залил, просто так понятнее будет.
Kosten
Kosten 06.11.2016 20:5518
0
Просто сделал, чтоб понятие было, и взял сайта, который представлен был.
iMadeas
iMadeas 06.11.2016 17:326
+1
Дмитрий, напишите лучше так:

Данный скрипт очень подойдёт для реалистичности эффекта онлайн/оффлайн статусу пользователя на вашем сайте без использования gif изображений. Пример применения - Страница пользователей. В верхней части страницы возле никнейма стоит вот такая иконка (видна гостям). Если посмотреть на неё, то она мерцает.

...и почистите комментарии, раз в них нет надобности
Kosten
Kosten 06.11.2016 17:427
0
iMadeas, с материалом не знаком, а вы его в комментариях описали, так просто с комментария вашего взял и ваше же описание поставил.
Сафрон
Сафрон 06.11.2016 18:118
+2
А ссылки где, но одна кнопка есть, а вторая, когда онлайн.
iMadeas
iMadeas 06.11.2016 20:3015
0
ссылки на что? или вам нужны ссылки на картинки онлайн/офлайн? у каждого сайта они свои же.
ucozmental
ucozmental 06.11.2016 19:239
0
И главное на сайте кнопки не скопируешь, самому перекрасить, сейчас попробую, если получится, то закину.
ucozmental
ucozmental 06.11.2016 19:3110
0
Вообщем как получилось, зеленую кнопку онлайн перекрасил, можете копировать и ставить в код. И вторую в алый оттенок вывел, думаю так правильно будет.

iMadeas
iMadeas 06.11.2016 20:3316
0
Вы не можете найти в интернете простые иконки для статусов 10х10 или 16х16?
Webmaster32
Webmaster32 06.11.2016 20:0711
0
Установил также себе на сайт вот что получилось Страница пользователя
Brung
Brung 06.11.2016 20:0912
0
Прикольно смотрится, если еще цвету добавить, а так оригинально.
Kosten
Kosten 06.11.2016 20:1113
0
А где пульсация или мерцание, хотя и раскачка по сторонам нормально.
Webmaster32
Webmaster32 06.11.2016 20:1614
0
Ну у меня то текстовый вариант онлайн/офлайн вот видно и нет пульсации только раскачка. И тем более я только стили добавил, сам код я не прописывал.
iMadeas
iMadeas 06.11.2016 20:3717
0
Для тех, кому нужна наша иконка онлайна + рабочий пример можно посмотреть.
avatar