Эффект пульсации или мерцания на 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 изображений. Пример применения - Страница пользователей. В верхней части страницы возле никнейма стоит вот такая иконка  (видна гостям). Если посмотреть на неё, то она мерцает. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 18 | |
|
Дмитрий, напишите лучше так:
Данный скрипт очень подойдёт для реалистичности эффекта онлайн/оффлайн статусу пользователя на вашем сайте без использования gif изображений. Пример применения - Страница пользователей. В верхней части страницы возле никнейма стоит вот такая иконка  (видна гостям). Если посмотреть на неё, то она мерцает. ...и почистите комментарии, раз в них нет надобности 
Вообщем как получилось, зеленую кнопку онлайн перекрасил, можете копировать и ставить в код. И вторую в алый оттенок вывел, думаю так правильно будет.
  
| |
| 1 2 » | |
