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

ساخت انیمیشن و تصاویر متحرک به کمک سی اس اس 3
سلام. یکی از قابلیت هایی که در سی اس اس ۳ معرفی شد animation بود که به وسیله اون میتونید تصاویر متحرک بسازید. برای آشنایی بیشتر با این قابلیت با من همراه باشید.
با استفاده از این قابلیت شما میتوایند دستوراتی را برای المان خودتون بنویسید و با کمک سی اس اس اونارو پشت سر هم اجرا نمایید. حالت کلی این کد به صورت زیر است:

@-webkit-keyframes mydesign {
دستورات
}
@-moz-keyframes mydesign {
دستورات
}

که در کد بالا من نام این انیمیشن را mydesig قرار دادم!
یک مثال میزنم تا بهتر متوجه بشوید؛ برای این کار ابتدا باید تعداد دستورات خود را مشخص کنید. برای مثال من در اینجا ۳ دستور مینویسم:

@-webkit-keyframes mydesign {
	۰% {background-color:#fff;}
	۵۰% {background-color:#FF0;}
	۱۰۰% {background-color:#fff;}
}
@-moz-keyframes mydesign {
	۰% {background-color:#fff;}
	۵۰% {background-color:#FF0;}
	۱۰۰% {background-color:#fff;}
}

ابتدا برای شروع ( یا همان ۰ درصد ) میگویم که رنگ زمینه المان سفید باشد.
سپس بعد از طی کردن نیمی از راه ( یعنی ۵۰ درصد ) میخواهم رنگ زمینه به رنگ زرد در بیاید.
و در آخر هم ( که همان ۱۰۰ درصد است ) دوباره رنگ به حالت سفید برگردد.
خوب حالا برای اینکه این انیمیشن را به یکی از المان هاتون متصل کنید به صورت زیر عمل کنید:

.your-class {
	animation: mydesing 3s;
-webkit-animation: mydesing 3s;
-moz-animation: mydesign 3s;
}

در کد بالا مقدار ۳s هم مقدار طول کشیدن تمام انیمیشن هست که مرورگر بر اساس آن سرعت حرکت ها و اعمال دستورات رو تنظیم میکنه.
به همین سادگی؛ اما به همین سادگی و کمی سلیقه میتوانید انیمیشن های فوق العاده زیبا خلق نمایید.

3 پاسخ به “ساخت انیمیشن و تصاویر متحرک به کمک سی اس اس ۳”

  1. ميثم خان بابايي می‌گه:

    سلام داداش علی، حالت چطوره 😉

  2. امیر می‌گه:

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
براش فتوشاپ درخت های کریسمس
طرح لایه باز لوگوی آماده گرد
آخرین دیدگاه های وردپرس بدون پلاگین
خاصیت word-wrap در سی اس اس ۳
۱۰ دلیل برای کاهش بازدید سایت شما
بارگذاری تصاویر وبسایت در صورت مشاهده (Lazy Load)