- Katılım
- 30 Eki 2016
- Mesajlar
- 6,910
- Beğeniler
- 12
- Puanları
- 18,020
- Konum
- Zonguldak
- Ad Soyad
- Turhan Karabulut
- Meslek
- Emlak
- Yaş
- 45
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.
Önizlemesi aşağıdaki gibidir.
temanızın extra.less şablonuna yapıştırmanız yeterli olacaktır.
CSS:
/*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ş*/
You do not have permission to view link
Giriş yap veya üye ol.