Авторизация
Подписчики
0
Анимация статуса сервера и не только
Описание
Все мои css анимации в одном мануале<br /><br />
Сейчас стали популярны различные анимации на сайте и особенным спросом пользуются анимации статуса серверов.
В этой теме я буду писать инструкции о том, как сделать различные анимации на примере статуса серверов движка Stress Web 13, но применить их можно практически к любому элементу сайта.
Я постараюсь описывать самые простые способы и варианты анимаций специально для тех, кто ничего не понимает в этом. Для тех кто разбирается достаточно просто скопировать стиль и присвоить класс нужному блоку.
Я напишу 1 пример, а любую другу анимацию вы будете делать аналогично:
============================ Начало примера==============================
Анимация #1 (Увеличение <=> уменьшение):
В 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 (Прыжки с тенью) ============================
В 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 (Движение влево<=>вправо) ============================
Данную анимацию обычно используют вместе со скриптом, что бы можно было менять время задержки, но я её упростил и поставил оптимальную задержку по умолчанию.
В 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) ============================
Как и в предыдущей анимации её обычно используют со скриптом, но мы будем делать максимально простым способом через ксс
В 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 (Появление <> Исчезновение) ============================
Еще одна очень простая, но не менее интересная анимация
В 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 (Свечение вокруг текста) ============================
Еще одна анимация. Она более индивидуальная. Свечение вокруг текста, который находится в вашем статусе. Работает только на текст. По умолчанию стоит белый цвет, но без труда можно поменять на любой.
В 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) ============================
В 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) ============================
В 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"
Рекомендуемые комментарии
Комментариев нет