Guides - Gezinirken avatar animasyonu / Avatar animation on hovering | EternalTeam.Org Xenforo Community
Neler yeni
Scorpiol                                                                                            Scorpiol VDS satın al

Guides Gezinirken avatar animasyonu / Avatar animation on hovering

Scorpiol

Yönetici
LV
5
 
Katılım
30 Eki 2022
Mesajlar
428
Tepkime puanı
52
Web sitesi
www.scorpioldefacer.com
  • Extra.less
Kod:
@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;
        }
    }
}

avatar.gif
 
xenforo eklentileri xenforo eklentiler defacer VDS satın al hacker blog
Üst Alt