ثبت نام

نمادها

logo-samandehi

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

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

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

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

کد های css:

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

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

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

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

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

 

این مجموعه فایل 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 بدهید که فقط همان زوم شود

پاسخ دهید

%u0637%u0631%u0627%u062D%u06CC %u0633%u0627%u06CC%u062A
طراحی سایتسئوفروش ویلا و اجاره ویلاسرویس و تعمیر کولر گازیاجاره ویلافروش ویلا