Jump to content
Sign in to follow this  

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


Description

Все мои css анимации в одном мануале<br /><br />

Сейчас стали популярны различные анимации на сайте и особенным спросом пользуются анимации статуса серверов.

 

В этой теме я буду писать инструкции о том, как сделать различные анимации на примере статуса серверов движка Stress Web 13, но применить их можно практически к любому элементу сайта.
Я постараюсь описывать самые простые способы и варианты анимаций специально для тех, кто ничего не понимает в этом. Для тех кто разбирается достаточно просто скопировать стиль и присвоить класс нужному блоку.

 

Я напишу 1 пример, а любую другу анимацию вы будете делать аналогично:

 

============================ Начало примера==============================

 

Анимация #1 (Увеличение <=> уменьшение):

 

l2banners_serv_animation_1.gif

 

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

.l2banners_serv_animation_1 {animation: l2banners_scale  2s infinite;}@keyframes l2banners_scale {from {  transform: scale(1);  }30% {  transform: scale(1.1);  }to {  transform: scale(1);  }}


В файле server.tpl находим тег [item] и после него в первом же теге прописываем класс:

class="l2banners_serv_animation_1"


Например в дефолтном шаблоне написано вот так:

[item]<tr>


значит у вас должно получиться вот так:

[item]<tr class="l2banners_serv_animation_1">


вместо <tr> там могут быть другие теги: <div> <li> <span> и т.д.. значит вставляете в тот который будет первым, если это <div> то получится вот так:

[item]<div class="l2banners_serv_animation_1">


Если там уже написано class= значит надо просто добавить через пробел l2banners_serv_animation_1

 


Например было написано: <div class="status"> вам надо просто добавить <div class="status l2banners_serv_animation_1">

 

Вот этот класс class="l2banners_serv_animation_1" вы можете добавить к любому элементу на сайте, например к логотипу.

 

============================ Конец примера==============================

 

Итак, если вы поняли принцип в дальнейшем я буду публиковать стиль анимации и название класса
Если что-то не получается пишите код вашего server.tpl в коменты и адрес вашего сайта мне в личку.
Так же пишите в коменты, какие анимации вы хотели бы увидеть.

 

 

 

 

 

================== Анимация №2 (Прыжки с тенью) ============================

 

l2banners_animation_2.gif

 

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

.l2banners_animation_2 {  animation: l2banners_bouncing 0.5s cubic-bezier(.1,.25,.1,1) 0s infinite alternate both;  position: relative; /* Если вдруг что-то не работает попробуйте удалить всю эту строку */}@keyframes l2banners_bouncing{  0%  { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5);}  100%{ bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1);}}


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

class="l2banners_animation_2"


================== Анимация №3 (Движение влево<=>вправо) ============================

 


l2banners_animation_3.gif

 

Данную анимацию обычно используют вместе со скриптом, что бы можно было менять время задержки, но я её упростил и поставил оптимальную задержку по умолчанию.

 

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

.l2banners_animation_3 {  animation: l2banners_swing 2.5s ease infinite;}@keyframes l2banners_swing	    {		    45%		    {			    -webkit-transform: translateX(0);			    transform: translateX(0);		    }		    46%		    {			    -webkit-transform: translateX(5px);			    transform: translateX(5px);		    }		    		    48%		    {			    -webkit-transform: translateX(-5px);			    transform: translateX(-5px);		    }		    		    50%		    {			    -webkit-transform: translateX(3px);			    transform: translateX(3px);		    }		    		    52%		    {			    -webkit-transform: translateX(-3px);			    transform: translateX(-3px);		    }		    		    54%		    {			    -webkit-transform: translateX(2px);			    transform: translateX(2px);		    }		    55%		    {			    -webkit-transform: translateX(0);			    transform: translateX(0);		    }		    		    100%		    {			    -webkit-transform: translateX(0);			    transform: translateX(0);		    }	    }


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

class="l2banners_animation_3"


================== Анимация №4 (l2banners_tada) ============================

 


l2banners_animation_4.gif

 

Как и в предыдущей анимации её обычно используют со скриптом, но мы будем делать максимально простым способом через ксс

 

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

.l2banners_animation_4 {  animation: l2banners_tada 3s infinite;}@keyframes l2banners_tada {    0% {        -webkit-transform:scale3d(1,1,1);        transform:scale3d(1,1,1)    }  25% {    -webkit-transform:scale3d(1,1,1);        transform:scale3d(1,1,1)  }    38%, 41% {        -webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);        transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)    }    44%,50%,56%,62% {        -webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);        transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)    }    47%,53%,59% {        -webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);        transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)    }    70% {        -webkit-transform:scale3d(1,1,1);        transform:scale3d(1,1,1)    }}


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

class="l2banners_animation_4"


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

 


l2banners_animation_5.gif

 

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

 

В 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"


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

 


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

 

l2banners_animation_6.gif

 

 

 

В 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"


================== Анимация №7 (Вибрация №1) ============================
l2banners_animation_7.gif

 


В 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"


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

 


l2banners_animation_8.gif

 

В 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.00) scaleY(1.00) ;  }  5% {    transform:  translate(0px,-10px)  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;  }  10% {    transform:  translate(0px,-21px)  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;  }  15% {    transform:  translate(0px,-16px)  rotate(3deg) scaleX(1.20) scaleY(1.20) ;  }  20% {    transform:  translate(0px,-12px)  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;  }  25% {    transform:  translate(0px,-7px)  rotate(3deg) scaleX(1.20) scaleY(1.20) ;  }  30% {    transform:  translate(0px,-2px)  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;  }  35% {    transform:  translate(0px,2px)  rotate(3deg) scaleX(1.20) scaleY(1.20) ;  }  40% {    transform:  translate(0px,7px)  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;  }  45% {    transform:  translate(0px,7px)  rotate(3deg) scaleX(1.20) scaleY(1.20) ;  }  50% {    transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;  }    100% {    transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;  }}


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

class="l2banners_animation_8"



Recommended Comments

There are no comments to display.

×
×
  • Create New...