loading...

ابزارها قالب

چرخش دادن به المنت های صفحه با استفاده از انیمیشن های css

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 4251 شنبه 01 فروردين 1394 نظرات (1)

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

 برای دیدن خروجی کد های خود از این لینک استفاده کنید

خیلی سریع میریم سروقت آموزش.

در css برای ایجاد انیمیشن باید از @keyframes استفاده کرد. ما هم همین کار را می کنیم:

<<<code>>>

@keyframes toolstheme

{

      ....

}

<<</code>>>

همان طور که در کد بالا هم قابل مشاهده است ما در قسمتی که با رنگ قرمز مشخص شده است ، از نام toolstheme استفاده کرده ایم. در واقع این قسمت مربوط به نامی دلخواه برای انیمیشن شماست. پس هر نامی دوست دارید انتخاب کنید. (البته توجه داشته باشید که این نام باید از قانون انتخاب نام کلس ها در css تبعیت کند. در غیر این صورت کد شما کار نخواهد کرد.)

حالا مرحله ی بعدی. در این مرحله ما انیمیشن خود را طراحی می کنیم. یعنی مراحل مختلفی از انیمیشن را مشخص می کنیم:

 <<<code>>>

@keyframes toolstheme

{

      0% { transform: rotate(0deg); } /* حالت اولیه ی المنت */

     100% { transform: rotate(360deg); } /* حالت ثانویه ی المنت */

}

<<</code>>>

در قسمتی که با رنگ قرمز مشخص شده است ، ما با استفاده از استایل transform چرخشی را تعریف کرده ایم (rotate) به زاویه ی 0درجه. در حالت ثانویه هم همین حالت را بعد از یک دور کامل یعنی در 360درجه تعیین کرده ایم.

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

بعد از تعریف کردن انیمیشن ما باید ، المنتی را معلوم کنیم و این انیمیشن را روی آن اجرا کنیم. برای این کار ما از تگ div استفاده کرده ایم و آی دی rotateToll را به آن داده ایم:

<<<code>>>

<div id="rotateTool"></div>

<<</code>>>

حالا نوبت استایل این تگه:

<<<code>>>

#rotateTool{

background: #f00;

width: 100px;

height: 100px;

animation: 2s linear 0.2s infinite toolstheme; /* استایلی که انیمیشن تعریف شده را به آی دی مورد نظر نسبت می دهد */

}

<<</code>>>

رنگ اول: در این رنگ مقدار 2s است (دو ثانیه). این مقدار مشخص کننده ی این است که اجرای انیمیشن از اول تا انتها برای یک بار چقدر طول بکشد.

رنگ دوم: در این رنگ مقدار های مختلفی می تواند قرار بگیرد که پرکاربرد ترین های این مقادیر linear و ease هستند. linear انیمیشن را به گونه ای تنظیم می کند که به طور ناگهانی شروع شود و به طور ناگهانی به پایان برسد. اما ease باعث می شود ، انیمیشن هنگام شروع آرام آرام سرعت بگیرد و در هنگام پایان هم کم کم سرعت خود را از دست بدهد. (با امتحان کردن این کد ، بهتر متوجه خواهید شد)

رنگ سوم: این مقدار ، مشخص کننده ی زمانی است که بین اجرای هر دوره از انیمیشن باید توقف ایجاد شود.

رنگ چهارم: این مقدار مشخص کننده ی تعداد دفعاتی است که انیمیشن باید تکرار شود. مقدار infinite یعنی برای همیشه تکرار شود. شما می توانید به جای آن از مقدار عدد صحیح استفاده کنید. ( 1 ، 4 ، 7 و ... )

رنگ پنجم: این مقدار هم که مشخص است. رنگ قرمز نام همان انیمیشنی است که قبلا تعریف کردیم.

اگر از کد های بالا را به درستی در صفحه به کار ببرید ، کدی تقریبا شبیه کد زیر به دست می آید.

 برای دیدن خروجی کد های خود از این لینک استفاده کنید (خروجی ساز)

مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط محسن در تاریخ 5 سال پیش و 13:43 دقیقه ارسال شده است

سلام، وقت به خیر
من می خوام لوگوی سایتم فقط یه بار بچرخه، فک کنم میشه 360 درجه؛ یعنی هر بار که صفحه سایتم باز میشه و یا رفرش میشه این اتفاق بیفته، با یه مثال نشون میدم. لطفاً آدرس این سایت رو ببینید، می خوام لوگوی سایتم مثل این سایت بشه:
https://mihanwp.com
اینم آدرس سایت خودم:
https://forfile.ir
ممنون میشم کد CSS رو بفرمایین.
تشکر
پاسخ : توی :hover
transform: rotate(360deg)
توی حالت عادی
transform: rotate(0deg)
transition: all .4s ease 0s


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3196
  • آی پی امروز : 39
  • آی پی دیروز : 115
  • بازدید امروز : 242
  • باردید دیروز : 822
  • گوگل امروز : 3
  • گوگل دیروز : 6
  • بازدید هفته : 1,855
  • بازدید ماه : 10,352
  • بازدید سال : 101,722
  • بازدید کلی : 1,788,157
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص