آموزش ایجاد افکت چرخشی و بزرگنمایی در آواتار کاربری (360 Degrees Turn & Zoom Out Effect)

[Sina]

سلام،
با این اموزش می تونید دو افکت زیبا در اواتار خود در ویبولتین ایجاد کنید​

ابتدا چرخشی یا 360 Degrees Turn

برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید

وقتی نشانگر ماوس را روی تصویر ببرید،360 درجه خواهد چرخید!برای اینکار ابتدا قالب additional.css را باز کرده و در ابتدای آن کد های زیر را قرار دهید:

[SIZE=2].myavatar:hover {  transition: all 3s ease; [/SIZE][SIZE=2]-webkit-transition: all 3s ease; [/SIZE]
[SIZE=2]-moz-transition: all 3s ease; transform:rotate(360deg); [/SIZE]
[SIZE=2]-moz-transform:rotate(360deg); [/SIZE]
[SIZE=2]-webkit-transform:rotate(360deg); position:relative;[/SIZE]
[SIZE=2]}[/SIZE]

در مرحله بعدی قالب postbit_legacy را باز کنید و کد زیر را پیدا کنید (قبل اینکار از کل کدها یه کپی بگیرید)

<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />

و حالا جایگزین کنید با کد زیر:

<div class="myavatar"><img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" /></div>

​

و ذخیره.



بخش دوم افکت بزرگنمایی (کوچیک نمایی حالا هرچی

) Zoom Out Effect

​

برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید

کد های زیر را در ابتدای قالب​

additional.css قرار دهید

​

[COLOR=#000000][SIZE=2][FONT=tahoma][RIGHT].myavatar:hover { opacity: 1; filter: alpha(opacity=100);
[/RIGHT]
[/FONT][/SIZE][/COLOR][SIZE=2][FONT=tahoma][RIGHT]
[/RIGHT]
[/FONT][/SIZE][COLOR=#000000][FONT=tahoma][SIZE=3][RIGHT]
[SIZE=2]transition: all 2s ease; [/SIZE]
[/RIGHT]
[/SIZE][/FONT][/COLOR][FONT=tahoma][SIZE=3][RIGHT]
[COLOR=#000000][SIZE=2]-webkit-transition: all 2s ease; [/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]-moz-transition: all 2s ease;[/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]transform:rotate(0deg); [/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]-moz-transform:rotate(0deg); [/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]-webkit-transform:rotate(0deg);[/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]transform: scale(1.5); [/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]-webkit-transform: scale(1.5); [/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]-moz-transform: scale(1.5);[/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]position:relative;[/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]
[/SIZE][/COLOR]
[COLOR=#000000][SIZE=2]}[/SIZE][/COLOR]
[/RIGHT]
[/SIZE][/FONT][FONT=tahoma][SIZE=3][RIGHT]
[/RIGHT]
[SIZE=2]

[/SIZE]

ادامه مراحل رو هم که قبل انجام دادیم دیگه نیازی به تکرار کردن ندارد.​

[/SIZE][/FONT]