ثبت نام

نمادها

آموزش تصویری ساخت بکگراند متحرک با css

سلام دوستان عزیز سلام برنامه با آموزش تصویری ساخت بکگراند متحرک با css در همراه شماست

آموزش تصویری ساخت بکگراند متحرک با css یکی از عوامل مهم در جذب کاربر برای سایت می باشد.

در آموزش امروز با خاصیت animation در css3 آشنا شده و یک بکگراند زیبا می سازیم.

زبان css3 و html5 تکمیل کننده زبان های قبلی خود با بسیاری امکانات جدید هستند

برای ساخت این بکگراند لازم است که کد های css زیر را به بکگراند سایت خود بدهید.

کد های css:

در کد های بالا با دستور keyframes شما یک انیمیشن ایجاد می کنید.

توجه داشته باشید برای آنکه انیمیشن اجرا شود باید کد animation: mymove 5s را در جایی که می خواهید اجرا شود بنویسید.

نکته مهم این است که انیمیشن ها برای آنکه بتوانند در تمام مرورگر ها اجرا شوند نیاز به پسوند های هر مرورگر دارند.

برای مثال مرورگر فایرفاکس با پسوند -moz- کار می کند و کروم و سافری با -webkit- که در کد بالا موجود است.

همچنین برای درک جزئیات آموزش می توانید ویدیو آموزش فارسی همراه سورس کد را از باکس دانلود دانلود نمایید.

 

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (هنوز امتیازی داده نشده است)
Loading...

این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

آموزش تصویری ساخت بکگراند متحرک با css و سورس کد ها : نوع فایل:rar/video/code حجم فایل:9.8 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

2 دیدگاه برای “آموزش تصویری ساخت بکگراند متحرک با css”

  1. نیما گفت:

    با عرض سلام و خسته نباشید و تشکر فراوان بخاطر اینکه این کد بسیار کاربردی به صورت خلاصه و قابل فهم در اختیار گذاشین.
    یه سوال داشم که تصویر میخوام در حین اینکه عوض میشود زوم نیز بشود اما مشکلی که هست این است که وقتی تصویر زوم میشود کادر یا حاشیه اطراف آن نیز همراه آن بزرگ میشود.میخاسم ببینم چجور میشود که در یه کادری با ارتفاع و عرض ثابت تصویر بزرگ شود و ارتفاع و عرض آن تغییری نکند.
    با تشکر فراوان از زحماتتون

    1. amir گفت:

      سلام دوست عزیز ممنون از لطفتون به دلیل اینکه جایی که انیمیشن زوم شدن رو تعریف میکنید جای اینکه اون رو به تصویر بدید به div می دهید به عنوان مثال:
      انیمیشنی با نام zoom دارید

      به جای اینکار
      .mydiv{animation:zoom 5s infinite}
      باید اینکار را کنید
      .mydiv img {animation:zoom 5s infinite}
      یعنی خاصیت رو به تگ img بدهید که فقط همان زوم شود

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.