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

[mohamad.s]

درود
اول برای چرخوندن 360 درجه ای آواتار هست.

اول این کد ها رو به سی اس اس های اضافه ، اضافه کنید :






.myavatar:hover { transition: all 3s ease; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); position:relative; }


حالا قالب 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}}"



این برای چرخوندن 360 درجه ای آواتار بود.


حالا اگر دوس داشتید که اواتارتون زوم بشه جای اون کد قبلی که توی سی سی اضافه قرار دادید این کد رو بزارید :





.myavatar:hover { opacity: 1; ******: alpha(opacity=100); transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); position:relative; }

موفق باشید.