آموزش ایجاد چرخش مداوم با css

          حمیدرضا 
            بازدید : 5219
          شنبه 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>>>

<<</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 و ... )

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

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

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

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

	این نظر توسط محسن در تاریخ 1396/12/07 و 13:43 دقیقه ارسال شده است

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

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2586	snakeeye
طراحی باکس دانلود	6	2792	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	9556	grimboy
انواع قالب اختصاصی	3	2330	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2739	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9914	jack7788