Добро пожаловать в сообщество newdle.ru!

Мы очень рады, что Вы посетили наш форум! Мы сможем помочь Вам с решением ваших вопросов. Пожалуйста, пройдите регистрацию, она занимает не более одной минуты.

РЕГИСТРАЦИЯ!

Анимация Аватара При Наведении

DarkWeb

Модератор Xenforo
Команда форума
Время
01:11
Регистрация
30 Авг 2022
Сообщения
3
Реакции
0
Баллы
1
Возраст
25
xenpoint
14
Я с
ВК
  • Автор темы
  • Модер.
  • Команда форума
  • #1
extra.less

HTML:
@background_color_1: #185886;

.message-avatar-wrapper {
    a {
        position: relative;
        transition: 2s;
        padding: 3px;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            transform: rotateX(90deg);
            z-index: -1;
        }
        &:after {
            transform: rotateY(90deg);
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            z-index: -1;
        }
        &:hover {
            &:before {
                transform: rotateX(0deg);
            }
            &:after {
                transform: rotateY(0deg);
            }
            z-index: 0;
        }
    }
}
.avatarWrapper {
    .avatar {
        position: relative;
        transition: 2s;
        padding: 3px;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            transform: rotateX(90deg);
            z-index: -1;
        }
        &:after {
            transform: rotateY(90deg);
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            z-index: -1;
        }
        &:hover {
            &:before {
                transform: rotateX(0deg);
            }
            &:after {
                transform: rotateY(0deg);
            }
            z-index: 0;
        }
    }
}
.memberTooltip-avatar {
    a {
        position: relative;
        transition: 2s;
        padding: 3px;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            transform: rotateX(90deg);
            z-index: -1;
        }
        &:after {
            transform: rotateY(90deg);
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            z-index: -1;
        }
        &:hover {
            &:before {
                transform: rotateX(0deg);
            }
            &:after {
                transform: rotateY(0deg);
            }
            z-index: 0;
        }
    }
}
XenForoInfo avatae
 
Сверху Снизу
DarkWeb

DarkWeb Purchase

User upgrade! at

🔥 Upgrade Now