Пульсирующий баннер группы

Пульсирующий баннер группы
Совместимость с XenForo
XenForo 1.2
,
XenForo 1.3
,
XenForo 1.4
,
XenForo 1.5
Пример пульсирующего баннера для трех групп.

Код устанавливается в EXTRA.css вашего стиля.
После чего в выбранной вами группе, ставите галочку напротив "Другой, использующий своё имя CSS-класса:", где вы добавляете css-класс в таком виде:

userBanner bannerModer - для модератора,
userBanner banAdmin - для админа и т.д.


Код:
/* Пульсирующий баннер - Модер*/
@-webkit-keyframes ModerPulse {
from { background-color: #00b300; -webkit-box-shadow: 0 0 2px #000000; }
          50% { background-color: #00b300; -webkit-box-shadow: 0 0 8px 2px #00b300; }
          to { background-color: #00b300; -webkit-box-shadow: 0 0 2px #000000; }
        } /* ModerPulse - уникальное название */
@-moz-keyframes ModerPulse {
from { background-color: #00b300; -moz-box-shadow: 0 0 2px #000000; }
          50% { background-color: #00b300; -moz-box-shadow: 0 0 8px 2px #00b300; }
          to { background-color: #00b300; -moz-box-shadow: 0 0 2px #000000; }
        }
@-o-keyframes ModerPulse {
from { background-color: #00b300; -o-box-shadow: 0 0 2px #000000; }
          50% { background-color: #00b300; -o-box-shadow: 0 0 8px 2px #00b300; }
          to { background-color: #00b300; -o-box-shadow: 0 0 2px #000000; }
        }
@keyframes ModerPulse {
from { background-color: #00b300; box-shadow: 0 0 2px #000000; }
          50% { background-color: #00b300; box-shadow: 0 0 8px 2px #00b300; }
          to { background-color: #00b300; box-shadow: 0 0 2px #000000; }
        }
.userBanner.bannerModer {
    color: #000000;
    font-size: 12px;
    text-align: center;
    margin: auto;
    border: none !important;
    background: transparent !important;
}
.userBanner.bannerModer {
    -webkit-animation-name: ModerPulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: ModerPulse;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation-name: ModerPulse;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    animation-name: ModerPulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background: none repeat scroll 0% 0% #c7ff2e !important;
}
.userBanner:hover .bannerModer {
      background: #8fc400 !important;
}
/* Конец пульсирующего баннера - Модер*/

/* Пульсирующий баннер - главная по банам*/
@-webkit-keyframes BanPulse {
from { background-color: #bf3eff; -webkit-box-shadow: 0 0 2px #000000; }
          50% { background-color: #bf3eff; -webkit-box-shadow: 0 0 8px 2px #bf3eff; }
          to { background-color: #bf3eff; -webkit-box-shadow: 0 0 2px #000000; }
        }
@-moz-keyframes BanPulse {
from { background-color: #bf3eff; -moz-box-shadow: 0 0 2px #000000; }
          50% { background-color: #bf3eff; -moz-box-shadow: 0 0 8px 2px #bf3eff; }
          to { background-color: #bf3eff; -moz-box-shadow: 0 0 2px #000000; }
        }
@-o-keyframes BanPulse {
from { background-color: #bf3eff; -o-box-shadow: 0 0 2px #000000; }
          50% { background-color: #bf3eff; -o-box-shadow: 0 0 8px 2px #bf3eff; }
          to { background-color: #bf3eff; -o-box-shadow: 0 0 2px #000000; }
        }
@keyframes BanPulse {
from { background-color: #bf3eff; box-shadow: 0 0 2px #000000; }
          50% { background-color: #bf3eff; box-shadow: 0 0 8px 2px #bf3eff; }
          to { background-color: #bf3eff; box-shadow: 0 0 2px #000000; }
        }
.userBanner.banModer {
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    margin: auto;
    border: none !important;
    background: transparent !important;
}
.userBanner.banModer {
    -webkit-animation-name: BanPulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: BanPulse;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation-name: BanPulse;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    animation-name: BanPulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background: none repeat scroll 0% 0% #c7ff2e !important;
}
.userBanner:hover .banModer {
      background: #8fc400 !important;
}
/* Конец пульсирующего баннера - главная по банам*/

/* Пульсирующий баннер - Админ*/
@-webkit-keyframes AdminPulse {
from { background-color: #ff0000; -webkit-box-shadow: 0 0 2px #000000; }
          50% { background-color: #ff0000; -webkit-box-shadow: 0 0 8px 2px #ff0000; }
          to { background-color: #ff0000; -webkit-box-shadow: 0 0 2px #000000; }
        }
@-moz-keyframes AdminPulse {
from { background-color: #ff0000; -moz-box-shadow: 0 0 2px #000000; }
          50% { background-color: #ff0000; -moz-box-shadow: 0 0 8px 2px #ff0000; }
          to { background-color: #ff0000; -moz-box-shadow: 0 0 2px #000000; }
        }
@-o-keyframes AdminPulse {
from { background-color: #ff0000; -o-box-shadow: 0 0 2px #000000; }
          50% { background-color: #ff0000; -o-box-shadow: 0 0 8px 2px #ff0000; }
          to { background-color: #ff0000; -o-box-shadow: 0 0 2px #000000; }
        }
@keyframes AdminPulse {
from { background-color: #ff0000; box-shadow: 0 0 2px #000000; }
          50% { background-color: #ff0000; box-shadow: 0 0 8px 2px #ff0000; }
          to { background-color: #ff0000; box-shadow: 0 0 2px #000000; }
        }
.userBanner.banAdmin {
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    margin: auto;
    border: none !important;
    background: transparent !important;
}
.userBanner.banAdmin {
    -webkit-animation-name: AdminPulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: AdminPulse;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation-name: AdminPulse;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    animation-name: AdminPulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background: none repeat scroll 0% 0% #c7ff2e !important;
}
.userBanner:hover .banAdmin {
      background: #8fc400 !important;
}
/* Конец пульсирующего баннера - Админ*/
ModerPulse, BanPulse, AdminPulse - уникальные названия эффекта.
.banAdmin, .banModer, .bannerModer - уникальные названия css-класса.


1banner.gif
3banner.gif
Автор
Next
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя Next