Hoşgeldin Misafir

XenForo Avatara Efekt Verme

Soner

Soner

THS Dış İstihbarat
23 Ağu 2020
2,507 Mesaj
TIM Görevleri
1

Aktiflik

Seviye

Deneyim

TIM / GÖREV:
Avatar üzerine fare ile gelince güzel bir animasyon efekti vereceğiz. Aşağıdaki css kodlarını temanızın extra.less şablonuna yapıştırmanız yeterli olacaktır.
Kod:
/*avatar animasyonu*/

.message-avatar-wrapper .avatar:before,

.message-avatar-wrapper .avatar:after{

border-color: #00c5de;

}

.message-avatar-wrapper a:before,

.message-avatar-wrapper a:after{

content: "";

display: block;

position: absolute;

background: transparent;

top: 0; bottom: 0; left: 0; right: 0;

border-radius: 5%; /*Köşeleri oval kare yada dikdörtgen bir avatara sahipseniz bu ayarı ellemeyin. Daire bir avatarınız varsa ayarı "50%" şeklinde değiştirmeniz yeterli olacaktır.*/

transition: .3s all;

border: 2px solid;

}

.message-avatar-wrapper a:hover:after{

-webkit-transform: scale(1.5);

}

.message-avatar-wrapper a:hover:before{

-webkit-transform: scale(2);

transition: .3s all;

opacity: 0;

}

/*avatar animasyonu bitiş*/
 
Geri
Üst