متحرک کردن تصویر در css

متحرک کردن تصویر در css

ما در مطلبی در گذشته با animation در CSS3 آشنا شدیم و این مطلب تنها برای مطرح کردن یک ایده است و حاوی کد جدیدی نیست. در این مطلب ما قصد داریم ببینیم که چگونه میتوان با استفاده از animation در CSS3 یک تصویر متحرک بسازیم.

متحرک کردن تصویر در css متحرک کردن تصویر در css متحرک کردن تصویر در css keyframes

متحرک کردن تصویر در css

keyframes@ در CSS3

با استفاده از این خاصیت یک استایل رو به یک استایل دیگه تبدیل میکنیم و یک انیمیشن بوجود میاریم . این کار رو با کلمه کلیدی from و  to انجام میدیم .

از دستور keyframes@ برای تعریف رفتار یک چرخه انیمیشن در CSS استفاده می شود.

قاعده ی دستوری خاصیت  keyframes@

 

برای مثال در عکس زیر ما میخواهیم پره های دو توربین بادی همواره در حال چرخش باشند .

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

متحرک کردن تصویر در css متحرک کردن تصویر در css متحرک کردن تصویر در css torbin

متحرک کردن تصویر در css

و پره های دو توربین به شکل باید باشند.

mill1 متحرک کردن تصویر در css متحرک کردن تصویر در css mill1mill2 متحرک کردن تصویر در css متحرک کردن تصویر در css mill2

حالا که همه چیز در اختیار ما قرار دارد تنها کاری که باید انجام دهیم این است که با استفاده از CSS پره ها را در محل مناسب خود قرار دهیم و با استفاده از animation در CSS3 آن ها را به صورت مداوم بچرخانیم.

برای اینکار کد HTML زیر را به صفحه اضافه میکنیم.

و کدهای CSS زیر را نیز اضافه میکنیم.

کد background-size:cover باعث میشود بکگراند کل عنصر را پوشش بگیرد

همینطور کد background-size:contain باعث میشود تصویر بزرگتر از عنصر نباشد.

 همانطور که میبینید ما پوزیشن پره ها را برابر absolute قرار دادیم.

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

بعد از انجام اینکار کدهای انیمیشن زیر را نیز اضافه میکنیم.کد transform-origin مشخص میکند که rotate روی چه نقطه ای انجام شود.

برای مثال اگر عرض و طول تصویر پره های ما یکسان بود باید این مشخصه را برابر center در نظر میگرفتیم

 

.image-wrap .mill1, .image-wrap .mill2 {
animation:spin 90s infinite linear;
transform-origin:127px 89px;
}
@keyframes spin {
0% {transform: rotateZ(0deg)}
100% {transform: rotateZ(360deg)}
}

 در پایین میتوانید دمو را مشاهده کنید. 
 

See the Pen Image Animation/Manipulation by hellion (@hellion121) on CodePen.

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید