loading...
ابزارها قالب
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 1996 شنبه 13 تیر 1394 نظرات (0)

همان طور که در مطالب قبلی هم توضیح داده شده است ، سی اس اس دارای یک سری ویژگی ها برای ایجاد انیمیشن است. من در این مطلب یک انیمیشن جالب درست کردم که شاید به درد بعضی از کاربران بخورد. همچنین این کد ها برای افرادی که می خواهند تجربه به دست بیاورند و تمرین سی اس اس داشته باشند ، بسیار مناسب است. این انیمیشن کاملا با کمک سی اس اس نوشته شده است و از جاوا اسکریپت یا جی کوئری در آن استفاده نشده است.

دموی این کد را در لینک پایین مشاهده کنید:

دموساز - دموی انیمیشن

کد های سی اس اس هم در این لینک قابل مشاهده است:

کد های css

 

توضیحات کد ها

پیشنهاد می کنم اول خودتان سعی کنید ، کد ها را ببینید و متوجه شوید هر قسمت مربوط به چه چیزی می باشد و چگونه این انیمیشن طراحی شده است. اگر خودتان به نتیجه ای نرسیدید ، این قسمت را مطالعه کنید.

اول از همه کد های اچ تی ام ال:

<<<code>>>

<link rel="stylesheet" href="http://up.toolstheme.ir/view/375218/ball%20rotation%20animatino.css" />

<div class="toolstheme-animation-background"></div>

<div class="toolstheme-animation-text">ابزارها قالب تقدیم می کند :D</div>

<div class="toolstheme-animation-ball"></div>

<<</code>>>

در خط اول ، فایل css که لینک آن در بالا موجود است ، بارگذاری می شود.

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

در خط سوم ، کلاس مربوط به متن در تگ div اعمال می شود.

در خط چهارم ، کلاس مربوط به توپ را در تگ div اعمال می شود. (اگر می خواید به جای تصویر توپ ، تصویر دیگری را در این قسمت داشته باشید ، می توانید در همین تگ به این شکل عمل کنید:

<<<code>>>

<div class="toolstheme-animation-ball" style="background-image: url('آدرس تصویر');"></div>

<<</code>>>

به جای "آدرس تصویر" هر آدرسی که دوست دارید قرار دهید تا تصویر مورد نظر شما نمایش داده شود.

کد های سی اس اس:

در کلاس toolstheme-animation-ball با استفاده از transform:rotate زاویه ی صفر به شی داده شده است و انیمیشن rotation برای آن در animation قرار داده شده است. در انیمیشن ، شی از سمت چپ به آخرین نقطه در سمت راست صفحه و حتی کمی آن طرف تر حرکت می کند در حالتی که 1080درجه می چرخد. (البته در زمان حرکت)

در کلاس toolstheme-animation-text چیز خاصی وجود ندارد. فقط مقدار opacity برابر صفر است که یعنی متن کاملا محو است. هنگامی که انیمیشن اجرا می شود ، متن از این حالت به opacity:1 می رسد. یعنی از حالت محو در عرض سه ثانیه به حالت کاملا مشخص می رسد.

در کلاس toolstheme-animation-background یک سری ویژگی ها مشخص شده است که شکلی رنگی با عرض 100پیکسل را ایجاد کرده است و فقط هنگامی که صفحه باز می شود با اجرای انیمیشن scroll ، طول آن زیاد می شود و به 100درصد می رسد.

مطالب مرتبط
ارسال نظر برای این مطلب

کد امنیتی رفرش
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3256
  • آی پی امروز : 13
  • آی پی دیروز : 122
  • بازدید امروز : 116
  • باردید دیروز : 286
  • گوگل امروز : 0
  • گوگل دیروز : 12
  • بازدید هفته : 2,468
  • بازدید ماه : 25,832
  • بازدید سال : 126,488
  • بازدید کلی : 1,944,194
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص