آموزش ساخت انیمیشن با سی اس اس

سلام

امروز قصد دارم یک آموزش ساده از سی اس اس بذارم

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

اگر عنوان را دقت کنید قصد دارم آموزش بدم چطوری یک انیمیشن با سی اس اس بسازید

لازم به ذکر است ما در این آموزش یک انیمیشن خیلی خیلی ساده میسازم تا بعضی ها که دانشی در این رابطه ندارند خسته نشند

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

امیدوارم مفید باشه

کد کامل

خوب به بررسی اجزا میپردازیم

اول از همه یک تگ

باز میکنیم و در آن استایل های انیمیشن خود را قرار میدهیم

در بعد از تگ

باز میکنیم و در به آن یک آی دی میدیم(برای دادن آی دی باید به شکل زیر عمل کنید)

اول از همه یک

خوب کار ما در html تمام شد و حال باید به این آی دی خودمون استایل بدیم

میریم و در آن مینویسیم

(در قسمت "نام آی دی مورد نظر" باید نام آی دی که اتخاب کرده اید را بنویسید که من باید نامش رو بذارم Animation )

خوب باید به این آی دی خودمون طول و عرض بدیم

من طولش رو 200 پیکسل گرفتم

و عرضش هم 200 پیکسل

کد ما تا به الآن در داخل تگ استایل باید به این شیوه باشد

فکر کنم فهمیدید که با خاصیت width طول و با height عرض را مشخص میکنیم

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

قرار دهیم که مشخص شود از هم جدا شدند مانند نمونه

اگر کدتون رو تا به اینجا داخل یک ادیتور قرار دهید میبینید که هیچ چیزی دیده نمیشود

حالا باید به آی دی خودمون یک بکگراند(رنگ پس زمینه)بدهیم

برای اینکار از خاصیت

استفاده میکنیم که شما باید به جای

#000

کد رنگ مورد نظر یا اسم رنگتون رو قرار بدید

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

برای اینکار باید به آخر اسم آی دی خودمون

اضافه کنیم یعنی به اینصورت

حالا باید میزان بکگراند،عرض،طول،میزان گردی ای دی و میزان زمان انجام عملیات آی دی رو وقتی که موس میره روی آی دی مشخص کنیم

این قسمت رو به صورت توضیح مختصر توشیح میدم و رد میشم چون قبل گفتم چه کار هایی انجام میدهد

در داخل هاور خود طول را به 400 پیکسل میرسانیم

عرض را به 100 پیکسل میرسانیم

و رنگ بکگراند را از #000 به #019690 تغییر میدهیم

میزان گردی لبه ها را 40 پیکسل میکنیم

(با استفاده از خاصیت بالا میتوانید دور هر چیزی را غیر متن گرد کنید)

میزان زمان انجام عملیات را بر روی 1 ثانیه قرار میدهیم

لازم به ذکر است میتوانید از خاصیت بالا در آی دی اصلی هم استفاده کنید(در قسمت #آی دی مورد نظر{})

حالا کدمون رو داخل یک ادیتور قرار میدهیم(میتونید از ادیتور زیر استفاده کنید که ساده هست)

ببخشید اگر طولانی شد و بد توضیح دادم امیدوارم مفید بوده باشه

موفق باشید...