Анимация статуса сервера и не только

[L2Banners]

[L2Banners]

Анимация №5 (Появление <> Исчезновение)



Еще одна очень простая, но не менее интересная анимация


В engine.css в самом низу добавляем:
.l2banners_animation_5 {
animation: l2banners_opacity 4s infinite;
}

@keyframes l2banners_opacity {
from {
opacity: 1;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}

В файле server.tpl добавляем класс:
class="l2banners_animation_5"

[L2Banners]

Анимация №6 (Свечение вокруг текст)

Еще одна анимация. Она более индивидуальная. Свечение вокруг текста, который находится в вашем статусе. Работает только на текст. По умолчанию стоит белый цвет, но без труда можно поменять на любой.



В engine.css в самом низу добавляем:

.l2banners_animation_6 {
animation: l2banners_shadow 4s infinite;
}

@keyframes l2banners_shadow {
from {
text-shadow: none;
}
74% {
text-shadow: none;
}
75% {
text-shadow: 0 0 1px #fff;
}
80% {
text-shadow: 0 0 50px #fff;
}
to {
text-shadow: none;
}
}

В файле server.tpl добавляем класс:

class="l2banners_animation_6"

[L2Banners]

Анимация №7 (Вибрация №1)





В engine.css в самом низу добавляем:

.l2banners_animation_7 {
-webkit-animation: vibrate-1 0.3s linear infinite both;
animation: vibrate-1 0.3s linear infinite both;
position: relative;
}

@keyframes vibrate-1 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
40% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
60% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
80% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}

В файле server.tpl добавляем класс:

class="l2banners_animation_7"

[L2Banners]

Анимация №8 (Drag_up)



В engine.css в самом низу добавляем:


/* Анимация 8 */
.l2banners_animation_8 {
animation: l2b_drag_up 3s linear infinite both;
transform-origin: 50% 50%;
}
@keyframes l2b_drag_up {
0% {
transform: translate(0px, 0px) rotate(0deg) scaleX(1) scaleY(1);
}
5% {
transform: translate(0px, -10px) rotate(-3deg) scaleX(0.8) scaleY(0.8);
}
10% {
transform: translate(0px, -21px) rotate(-3deg) scaleX(0.8) scaleY(0.8);
}
15% {
transform: translate(0px, -16px) rotate(3deg) scaleX(1.2) scaleY(1.2);
}
20% {
transform: translate(0px, -12px) rotate(-3deg) scaleX(1.2) scaleY(1.2);
}
25% {
transform: translate(0px, -7px) rotate(3deg) scaleX(1.2) scaleY(1.2);
}
30% {
transform: translate(0px, -2px) rotate(-3deg) scaleX(1.2) scaleY(1.2);
}
35% {
transform: translate(0px, 2px) rotate(3deg) scaleX(1.2) scaleY(1.2);
}
40% {
transform: translate(0px, 7px) rotate(-3deg) scaleX(1.2) scaleY(1.2);
}
45% {
transform: translate(0px, 7px) rotate(3deg) scaleX(1.2) scaleY(1.2);
}
50% {
transform: translate(0px, 0px) rotate(0deg) scaleX(1) scaleY(1);
}
100% {
transform: translate(0px, 0px) rotate(0deg) scaleX(1) scaleY(1);
}
}



В файле server.tpl добавляем класс:


class="l2banners_animation_8"