Accueil![[Share] Hiệu ứng avatar xoay tròn và nghiêng và xoay cho vBB Bar_left](https://2img.net/i/fa/invision/bar_left.gif){kind=small}
![[Share] Hiệu ứng avatar xoay tròn và nghiêng và xoay cho vBB Bar](https://2img.net/i/fa/invision/bar.gif){kind=small}
![[Share] Hiệu ứng avatar xoay tròn và nghiêng và xoay cho vBB Bar_right](https://2img.net/i/fa/invision/bar_right.gif){kind=small}
![[Share] Hiệu ứng avatar xoay tròn và nghiêng và xoay cho vBB Empty](https://2img.net/i/empty.gif)
Hiệu ứng avatar xoay tròn và nghiêng và xoay cho vBB
Hiệu ứng avatar nghiêng, xoay
Thêm vào CSS trong phần Admincp , Vào phần Style & giao diện , Chọn
Tìm kiếm khuôn mẫu ( Search Templates) , bạn gõ additional.css v
Hiệu ứng phóng to avatar khi rê chuột vào
Hiệu ứng avatar xoay tròn
Tiếp theo :
Bạn Chọn một trong 3 cái trên . Sau đó vào POSTBIT_LEGACY ( hoặc POSTBIT )
Tìm
Tìm
Thay thành
Hiệu ứng avatar nghiêng, xoay
Trong đó height và width các bạn chỉnh sao cho vừa với khung profile của các bạn . Chỉnh sửa theo ý thích nhé
Save lại .
F5 và xem kết quả .![[Share] Hiệu ứng avatar xoay tròn và nghiêng và xoay cho vBB 26](https://2img.net/h/c3thachthat.com/forum/images/smilies/TLBB/26.gif)
Hiệu ứng phóng to avatar khi rê chuột vào
Hiệu ứng avatar xoay tròn
Hiệu ứng avatar nghiêng, xoay
Thêm vào CSS trong phần Admincp , Vào phần Style & giao diện , Chọn
Tìm kiếm khuôn mẫu ( Search Templates) , bạn gõ additional.css v
- Code:
[color=#000000][color=#007700].[/color][color=#0000BB]avatarx img[/color][color=#007700]{
[/color][color=#0000BB]opacity[/color][color=#007700]: [/color][color=#0000BB]0.3[/color][color=#007700];[/color][color=#0000BB]filter[/color][color=#007700]: [/color][color=#0000BB]alpha[/color][color=#007700]([/color][color=#0000BB]opacity[/color][color=#007700]=[/color][color=#0000BB]30[/color][color=#007700]);
[/color][color=#0000BB]border[/color][color=#007700]-[/color][color=#0000BB]radius[/color][color=#007700]:[/color][color=#0000BB]5px[/color][color=#007700];
[/color][color=#0000BB]background[/color][color=#007700]-[/color][color=#0000BB]color[/color][color=#007700]: [/color][color=#FF8000]#FFFFFF;
[/color][color=#0000BB]margin[/color][color=#007700]:[/color][color=#0000BB]1px 3px 3px 1px[/color][color=#007700];
[/color][color=#0000BB]padding[/color][color=#007700]:[/color][color=#0000BB]3px[/color][color=#007700];
[/color][color=#0000BB]border[/color][color=#007700]:[/color][color=#0000BB]1px solid [/color][color=#FF8000]#d4d4d4;
[/color][color=#0000BB]box[/color][color=#007700]-[/color][color=#0000BB]shadow[/color][color=#007700]: [/color][color=#0000BB]3px 3px 3px [/color][color=#FF8000]#8A8A8A;
[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]30deg[/color][color=#007700]); -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]30deg[/color][color=#007700]); -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]30deg[/color][color=#007700]);
[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700]; -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700]; -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700];
}
.[/color][color=#0000BB]avatarx img[/color][color=#007700]:[/color][color=#0000BB]hover [/color][color=#007700]{
[/color][color=#0000BB]opacity[/color][color=#007700]: [/color][color=#0000BB]1[/color][color=#007700]; [/color][color=#0000BB]filter[/color][color=#007700]: [/color][color=#0000BB]alpha[/color][color=#007700]([/color][color=#0000BB]opacity[/color][color=#007700]=[/color][color=#0000BB]100[/color][color=#007700]);
[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700]; -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700]; -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700];
[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]0deg[/color][color=#007700]); -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]0deg[/color][color=#007700]); -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]0deg[/color][color=#007700]);
[/color][color=#0000BB]transform[/color][color=#007700]: [/color][color=#0000BB]scale[/color][color=#007700]([/color][color=#0000BB]1.5[/color][color=#007700]); -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]: [/color][color=#0000BB]scale[/color][color=#007700]([/color][color=#0000BB]1.5[/color][color=#007700]); -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]: [/color][color=#0000BB]scale[/color][color=#007700]([/color][color=#0000BB]1.5[/color][color=#007700]);
[/color][color=#0000BB]position[/color][color=#007700]:[/color][color=#0000BB]relative[/color][color=#007700];
}
[/color][/color]
Hiệu ứng phóng to avatar khi rê chuột vào
- Code:
[color=#000000][color=#007700].[/color][color=#0000BB]avatar9x img[/color][color=#007700]{
[/color][color=#0000BB]opacity[/color][color=#007700]: [/color][color=#0000BB]0.3[/color][color=#007700];[/color][color=#0000BB]filter[/color][color=#007700]: [/color][color=#0000BB]alpha[/color][color=#007700]([/color][color=#0000BB]opacity[/color][color=#007700]=[/color][color=#0000BB]30[/color][color=#007700]);
[/color][color=#0000BB]border[/color][color=#007700]-[/color][color=#0000BB]radius[/color][color=#007700]:[/color][color=#0000BB]5px[/color][color=#007700];
[/color][color=#0000BB]background[/color][color=#007700]-[/color][color=#0000BB]color[/color][color=#007700]: [/color][color=#FF8000]#FFFFFF;
[/color][color=#0000BB]margin[/color][color=#007700]:[/color][color=#0000BB]1px 3px 3px 1px[/color][color=#007700];
[/color][color=#0000BB]padding[/color][color=#007700]:[/color][color=#0000BB]3px[/color][color=#007700];
[/color][color=#0000BB]border[/color][color=#007700]:[/color][color=#0000BB]1px solid [/color][color=#FF8000]#d4d4d4;
[/color][color=#0000BB]box[/color][color=#007700]-[/color][color=#0000BB]shadow[/color][color=#007700]: [/color][color=#0000BB]3px 3px 3px [/color][color=#FF8000]#8A8A8A;
[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]0deg[/color][color=#007700]); -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]0deg[/color][color=#007700]); -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]0deg[/color][color=#007700]);
[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700]; -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700]; -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700];
}
.[/color][color=#0000BB]avatar9x img[/color][color=#007700]:[/color][color=#0000BB]hover [/color][color=#007700]{
[/color][color=#0000BB]opacity[/color][color=#007700]: [/color][color=#0000BB]1[/color][color=#007700]; [/color][color=#0000BB]filter[/color][color=#007700]: [/color][color=#0000BB]alpha[/color][color=#007700]([/color][color=#0000BB]opacity[/color][color=#007700]=[/color][color=#0000BB]100[/color][color=#007700]);
[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700]; -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700]; -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 2s ease[/color][color=#007700];
[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]0deg[/color][color=#007700]); -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]0deg[/color][color=#007700]); -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]0deg[/color][color=#007700]);
[/color][color=#0000BB]transform[/color][color=#007700]: [/color][color=#0000BB]scale[/color][color=#007700]([/color][color=#0000BB]1.5[/color][color=#007700]); -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]: [/color][color=#0000BB]scale[/color][color=#007700]([/color][color=#0000BB]1.5[/color][color=#007700]); -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]: [/color][color=#0000BB]scale[/color][color=#007700]([/color][color=#0000BB]1.5[/color][color=#007700]);
[/color][color=#0000BB]position[/color][color=#007700]:[/color][color=#0000BB]relative[/color][color=#007700];
}
[/color][/color]
Hiệu ứng avatar xoay tròn
- Code:
[color=#000000][color=#007700].[/color][color=#0000BB]avatarskyit img [/color][color=#007700]{
[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 15s ease[/color][color=#007700]; -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 15s ease[/color][color=#007700]; -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 15s ease[/color][color=#007700];
[/color][color=#0000BB]transition[/color][color=#007700]-[/color][color=#0000BB]delay[/color][color=#007700]: [/color][color=#0000BB]5s[/color][color=#007700]; -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]-[/color][color=#0000BB]delay[/color][color=#007700]: [/color][color=#0000BB]5s[/color][color=#007700]; -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]-[/color][color=#0000BB]delay[/color][color=#007700]: [/color][color=#0000BB]5s[/color][color=#007700];
[/color][color=#0000BB]background[/color][color=#007700]-[/color][color=#0000BB]color[/color][color=#007700]: [/color][color=#FF8000]#FFFFFF;
[/color][color=#0000BB]max[/color][color=#007700]-[/color][color=#0000BB]width[/color][color=#007700]:[/color][color=#0000BB]143px[/color][color=#007700];
[/color][color=#0000BB]border[/color][color=#007700]-[/color][color=#0000BB]radius[/color][color=#007700]:[/color][color=#0000BB]5px[/color][color=#007700];
[/color][color=#0000BB]margin[/color][color=#007700]:[/color][color=#0000BB]1px 3px 3px 1px[/color][color=#007700];
[/color][color=#0000BB]padding[/color][color=#007700]:[/color][color=#0000BB]3px[/color][color=#007700];
[/color][color=#0000BB]border[/color][color=#007700]:[/color][color=#0000BB]1px solid [/color][color=#FF8000]#d4d4d4;
[/color][color=#0000BB]box[/color][color=#007700]-[/color][color=#0000BB]shadow[/color][color=#007700]: [/color][color=#0000BB]3px 3px 3px [/color][color=#FF8000]#8A8A8A;
[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700](-[/color][color=#0000BB]20deg[/color][color=#007700]); -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700](-[/color][color=#0000BB]20deg[/color][color=#007700]); -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700](-[/color][color=#0000BB]20deg[/color][color=#007700]);
}.[/color][color=#0000BB]avatarskyit img[/color][color=#007700]:[/color][color=#0000BB]hover [/color][color=#007700]{
[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 3s ease[/color][color=#007700]; -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 3s ease[/color][color=#007700]; -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transition[/color][color=#007700]: [/color][color=#0000BB]all 3s ease[/color][color=#007700];
[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]360deg[/color][color=#007700]); -[/color][color=#0000BB]moz[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]360deg[/color][color=#007700]); -[/color][color=#0000BB]webkit[/color][color=#007700]-[/color][color=#0000BB]transform[/color][color=#007700]:[/color][color=#0000BB]rotate[/color][color=#007700]([/color][color=#0000BB]360deg[/color][color=#007700]);
[/color][color=#0000BB]position[/color][color=#007700]:[/color][color=#0000BB]relative[/color][color=#007700];
}
[/color][/color]
Tiếp theo :
Bạn Chọn một trong 3 cái trên . Sau đó vào POSTBIT_LEGACY ( hoặc POSTBIT )
Tìm
Tìm
- Code:
[color=#000000][color=#007700]<[/color][color=#0000BB]div [/color][color=#007700]class=[/color][color=#DD0000]"postavatar"[/color][color=#007700]><[/color][color=#0000BB]img src[/color][color=#007700]=[/color][color=#DD0000]"{vb:raw post.avatarurl}" [/color][color=#0000BB]alt[/color][color=#007700]=[/color][color=#DD0000]"{vb:rawphrase xs_avatar, {vb:raw post.username}}" [/color][color=#0000BB]title[/color][color=#007700]=[/color][color=#DD0000]"{vb:rawphrase xs_avatar, {vb:raw post.username}}" [/color][color=#007700]></[/color][color=#0000BB]div[/color][color=#007700]> [/color][/color]
Thay thành
Hiệu ứng avatar nghiêng, xoay
- Code:
[color=#000000][color=#007700]<[/color][color=#0000BB]div [/color][color=#007700]class=[/color][color=#DD0000]"avatarx"[/color][color=#007700]><[/color][color=#0000BB]img src[/color][color=#007700]=[/color][color=#DD0000]"{vb:raw post.avatarurl}" [/color][color=#0000BB]alt[/color][color=#007700]=[/color][color=#DD0000]"{vb:rawphrase xs_avatar, {vb:raw post.username}}" [/color][color=#0000BB]title[/color][color=#007700]=[/color][color=#DD0000]"{vb:rawphrase xs_avatar, {vb:raw post.username}}" [/color][color=#0000BB]width[/color][color=#007700]=[/color][color=#DD0000]'175px' [/color][color=#0000BB]height[/color][color=#007700]=[/color][color=#DD0000]'170px'[/color][color=#007700]/></[/color][color=#0000BB]div[/color][color=#007700]>[/color][/color]
Trong đó height và width các bạn chỉnh sao cho vừa với khung profile của các bạn . Chỉnh sửa theo ý thích nhé
Save lại .
F5 và xem kết quả .
Hiệu ứng phóng to avatar khi rê chuột vào
- Code:
[color=#000000][color=#007700]<[/color][color=#0000BB]div [/color][color=#007700]class=[/color][color=#DD0000]"avatar9x"[/color][color=#007700]><[/color][color=#0000BB]img src[/color][color=#007700]=[/color][color=#DD0000]"{vb:raw post.avatarurl}" [/color][color=#0000BB]alt[/color][color=#007700]=[/color][color=#DD0000]"{vb:rawphrase xs_avatar, {vb:raw post.username}}" [/color][color=#0000BB]title[/color][color=#007700]=[/color][color=#DD0000]"{vb:rawphrase xs_avatar, {vb:raw post.username}}" [/color][color=#0000BB]width[/color][color=#007700]=[/color][color=#DD0000]'175px' [/color][color=#0000BB]height[/color][color=#007700]=[/color][color=#DD0000]'170px'[/color][color=#007700]/></[/color][color=#0000BB]div[/color][color=#007700]>
[/color][/color]
Hiệu ứng avatar xoay tròn
- Code:
[color=#000000][color=#007700]<[/color][color=#0000BB]div [/color][color=#007700]class=[/color][color=#DD0000]"avatarskyit"[/color][color=#007700]><[/color][color=#0000BB]img src[/color][color=#007700]=[/color][color=#DD0000]"{vb:raw post.avatarurl}" [/color][color=#0000BB]alt[/color][color=#007700]=[/color][color=#DD0000]"{vb:rawphrase xs_avatar, {vb:raw post.username}}" [/color][color=#0000BB]title[/color][color=#007700]=[/color][color=#DD0000]"{vb:rawphrase xs_avatar, {vb:raw post.username}}" [/color][color=#0000BB]width[/color][color=#007700]=[/color][color=#DD0000]'175px' [/color][color=#0000BB]height[/color][color=#007700]=[/color][color=#DD0000]'170px'[/color][color=#007700]/></[/color][color=#0000BB]div[/color][color=#007700]>
[/color][/color]