1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.

  2. Внимание! Все изображения загружаются только на наш сервер! Для этого используйте кнопку «Прикрепить файлы» ниже или просто перетащите необходимые изображения со своего компьютера в окно редактора.

    Скрыть объявление
Файлы cookie Изображение
Скрыть объявление
Привет Гость! Рады вас видеть на нашем форуме. Вы видете это сообщение так как вы не зарегистрированы. Зарегистрируйтесь на нашем форуме и у Вас появятся дополнительные возможности.

Анимация графов кто в чате

Тема в разделе "Настройки AUGUST4U.RU", создана пользователем Ledi Sharm, 15 июн 2020.

Метки:
  1. Ledi Sharm

    Ledi Sharm Новичок

    Регистрация:
    15 май 2020
    Сообщения:
    12
    Симпатии:
    12
    Баллы:
    3
    Пол:
    Женский
    Не знала как правильно назвать тему, пусть будет анимация графов кто в чате)
    Выставлю неколько кодов для шаблона Кто в чате.
    ​
     
    Ledi Sharm, 15 июн 2020
    #1
    Мира35 нравится это.
  2. Ledi Sharm

    Ledi Sharm Новичок

    Регистрация:
    15 май 2020
    Сообщения:
    12
    Симпатии:
    12
    Баллы:
    3
    Пол:
    Женский
    Вращающиеся графы для шаблона Кто в чате.
    Открываем: Админка-Клиент-html шаблоны 1-Кто в чате и в самый низ шаблона добавляем:​
    Код:
    <style type="text/css">
img.nick {
width: 145;
height: 60;
box-shadow: 0 0 2px 1px #777;
border-radius: 9px;
-webkit-transition: all 0.2s ease;
transition: all 0.7s ease;
/*****/
border-bottom-left-radius: 100px;
border-top-right-radius: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform:scale(1);
transform:scale(1);
filter: grayscale(100%);
/**********************/
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(180deg);
transform-style: preserve-3d;
}
img.nick:hover {
width: 170;
height: 70;
border-radius:7px;
box-shadow: 0 0 3px 2px #666;
border-radius: 9px;
-webkit-transform:scale(1);
transform:scale(1);
-webkit-filter: contrast(100%);
/********/
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
/*========================*/
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(0deg);
transform-style: preserve-3d;
/*****************************/
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/**a img {
opacity:0.7;
-moz-opacity:0.7;
filter: alpha(opacity=70) white;
-khtml-opacity: 0.7;
background-color:transparent;
}
a img:hover {
opacity:1.0;
-moz-opacity:1.0;
filter: alpha(opacity=100) white;
-khtml-opacity: 1.0;
background-color:transparent;
-webkit-filter: contrast(110%);
}**/
::-webkit-scrollbar{
width:9px;
}
::-webkit-scrollbar-thumb{
border-width:1px 1px 1px 2px;
border-color: #333;
background-color: #000;
}
::-webkit-scrollbar-thumb:hover{
border-width: 1px 1px 1px 2px;
border-color: #333;
background-color: #000;
}
::-webkit-scrollbar-track{
border-width: 1px 1px 1px 2px;
border-color: #333;
background-color: #000;
}
::-webkit-scrollbar-track:hover{
border-left: solid 1px #000;
background-color: #000;
}
/**********************Ха-ха-ха августтоп************************/
.hovicon.effect-8 {
background: rgba(255, 255, 255, 0.1);
-webkit-transition: -webkit-transform ease-out 0.2s, background 0.3s;
-moz-transition: -moz-transform ease-out 0.2s, background 0.3s;
transition: transform ease-out 0.2s, background 0.3s;
}
.hovicon.effect-8:after {
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.hovicon.effect-8:hover {
background: rgba(255, 255, 255, 0.05);
-webkit-transform: scale(0.93);
-moz-transform: scale(0.93);
-ms-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}
.hovicon.effect-8:hover i {
color: #fff;
}
.hovicon.effect-8:hover:after {
-webkit-animation: sonarEffect 1.3s ease-out 71ms;
-moz-animation: sonarEffect 1.3s ease-out 71ms;
animation: sonarEffect 1.3s ease-out 71ms;
}
@-webkit-keyframes sonarEffect {
0% {
opacity: 0.3;
}
30% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@-moz-keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
-moz-transform: scale(1.5);
opacity: 0;
}
}
@keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px
10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.5);
opacity: 0;
}
}
</style>
    Выглядеть будет вот так:
    для форума1.gif ​
     
    Последнее редактирование: 15 июн 2020
    Ledi Sharm, 15 июн 2020
    #2
    diskodens, cuddlies и evgenii78 нравится это.
  3. Ledi Sharm

    Ledi Sharm Новичок

    Регистрация:
    15 май 2020
    Сообщения:
    12
    Симпатии:
    12
    Баллы:
    3
    Пол:
    Женский
    Графы в чате в рамке уменьшаются: Открываем: Админка-Клиент-html шаблоны 1-Кто в чате и в самый низ шаблона добавляем:​
    Код:
    <style type="text/css">
    img.nick{
    background:transparent;
    }
    img.nick:hover{
    width: 185;
height: 85;
box-shadow: 0 0 2px 1px #777;
border-radius: 9px;
-webkit-transition: all 0.2s ease;
transition: all 0.7s ease;
background:transparent;
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    }
</style>
<style type="text/css">
img.nick {
width: 185;
height: 85;
box-shadow: 0 0 2px 1px #777;
border-radius: 9px;
-webkit-transition: all 0.2s ease;
transition: all 0.7s ease;
-webkit-transition: all 900ms ;
    -moz-transition: all 900ms ;
    -ms-transition: all 900ms ;
    -o-transition: all 900ms ;
    transition: all 900ms ;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
-khtml-opacity: 1;
}
</style>
    для форума2.gif ​
     
    Ledi Sharm, 15 июн 2020
    #3
    Мира35 и cuddlies нравится это.
  4. Ledi Sharm

    Ledi Sharm Новичок

    Регистрация:
    15 май 2020
    Сообщения:
    12
    Симпатии:
    12
    Баллы:
    3
    Пол:
    Женский
    Графы, иконки и надписи в чате в рамке, графы при наведение на них уменьшаются(надписи в чате будут в рамке только в том случае если они добавлены через шаблон кто в чате а не для каждого дизайна отдельно, у меня в чате надписи идут для каждого дизайна свои поэтому в рамку они и не встали):
    Открываем: Админка-Клиент-html шаблоны 1-Кто в чате и в самый низ шаблона добавляем​
    Код:
    <style type="text/css">
    img {
    background:transparent;
    }
    img.nick:hover{
    width: 185;
height: 85;
box-shadow: 0 0 2px 1px #777;
border-radius: 9px;
-webkit-transition: all 0.2s ease;
transition: all 0.7s ease; 
background:transparent;
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    }
</style>
<style type="text/css">
img {
width: 185;
height: 85;
box-shadow: 0 0 2px 1px #777;
border-radius: 9px;
-webkit-transition: all 0.2s ease;
transition: all 0.7s ease; 
-webkit-transition: all 900ms ;
    -moz-transition: all 900ms ;
    -ms-transition: all 900ms ;
    -o-transition: all 900ms ;
    transition: all 900ms ;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
-khtml-opacity: 1;
}
</style>

при наведение на графы уменьшаются больше:
<style type="text/css">
    img {
    background:transparent;
    }
    img.nick:hover{
    width: 185;
height: 85;
box-shadow: 0 0 2px 1px #777;
border-radius: 12px;
-webkit-transition: all 0.5s ease;
transition: all 0.7s ease; 
background:transparent;
    -ms-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
    }
</style>
<style type="text/css">
img {
box-shadow: 0 0 2px 1px #777;
border-radius: 12px;
-webkit-transition: all 0.5s ease;
transition: all 0.9s ease; 
-webkit-transition: all 1100ms ;
    -moz-transition: all 1100ms ;
    -ms-transition: all 1100ms ;
    -o-transition: all 1100ms ;
    transition: all 1100ms ;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
-khtml-opacity: 1;
}
</style>
    для форума3.gif ​
     
    Ledi Sharm, 15 июн 2020
    #4
    Мира35 и cuddlies нравится это.
  5. evgenii78

    evgenii78 Новичок

    Регистрация:
    15 июн 2020
    Сообщения:
    2
    Симпатии:
    0
    Баллы:
    1
    Пол:
    Мужской
     
    evgenii78, 15 июн 2020
    #5
  6. evgenii78

    evgenii78 Новичок

    Регистрация:
    15 июн 2020
    Сообщения:
    2
    Симпатии:
    0
    Баллы:
    1
    Пол:
    Мужской
    Все шик модерн Лерочка. Ты талантище.
     
    evgenii78, 15 июн 2020
    #6
  7. Ledi Sharm

    Ledi Sharm Новичок

    Регистрация:
    15 май 2020
    Сообщения:
    12
    Симпатии:
    12
    Баллы:
    3
    Пол:
    Женский
    Спасибо Жень)
     
    Ledi Sharm, 16 июн 2020
    #7
  8. cuddlies

    cuddlies Новичок

    Регистрация:
    16 июн 2020
    Сообщения:
    1
    Симпатии:
    0
    Баллы:
    1
    Пол:
    Женский
    спасибки ++++++
     
    cuddlies, 16 июн 2020
    #8
  9. diskodens

    diskodens Новичок

    Регистрация:
    26 июл 2020
    Сообщения:
    1
    Симпатии:
    0
    Баллы:
    1
    Пол:
    Мужской
    Эфекты просто оболденные спасибо за проделаную работу
     
    diskodens, 26 июл 2020
    #9
✖ Здравствуйте! Кажется, вы используете AdBlockили другой блокировщик - могут быть недоступны некоторые функции сайта. Добавьте, пожалуйста, наш сайт в исключения. Спасибо за понимание!