آموزش ایجاد افکت برای آوتار

پشتیبانی از نسخه های

1. 2.0
2. 2.1

برای ایجاد یک افکت زیبا برای آوتار کاربران طبق عکس زیر







در جستجوی قالب extra.less را سرچ کنید و کد زیر را در قالب قرار دهید

/*avatar animation*/
.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%; /*Do not touch this setting if you have an oval square or rectangle avatar. If you have an avatar, simply change the setting to "50%".*/
    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 animation end*/