آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها

برای شروع کار من پروژه ی 14 را در فولدر WorkSpace و سپس فایل های index.html و style.css را درون آن ایجاد می کنم و دو فایل را به هم لینک می دهم: المان های HTML به طور پیشفرض Style هایی درند که گاهی در طراحی مشکل ساز می شوند. برای جلو گیری از مشکل ساز شدن این المان ها ما می توانیم تنظیمات پیشفرضی را که ممکن است مشکل ساز شوند به حالت غیر فعال در می آوریم که به این کار نوشتنِ CSS Reset می گویند. ما می توانیم از کد های آماده ی داخل اینترنت استفاده کنیم. CSS Reset : کد بالا نمونه ای از CSS Reset ها بود. توجه داشته باشید که این کد ها را باید در بالای فایل CSS قرار داد. خب برای شروعِ کار من یک DIV داخل صفحه ی HTML تعریف و سپس به آن کمی Style می دهم. فایل HTML: و داخل فایل CSS پس از CSS Reset ها : در کد بالا ما مقدار پراپرتیِ Margin را برابر 10px Autoقرار دادیم که فاصله ی المان را ازبالا و پایین 10px و فاصله ی آن را از چپ و راست Auto در نظر می گیرد(مقدار Auto باعث وسط افتادن المان می شود.)توجه داشته باشید که تنها در صورتی که المان Inline باشد و المان مادرش (المانی که داخل آن قرار دارد) Block باشد ، المانِ ما وسط خواهد افتاد. خروجی: دیدیم که المان ما در وسط صفحه ظاهر شد. ما برای دادن Animation به یک المان باید ابتدا یک Animation تعریف کنیم و سپس آن را به المان های دلخواه بدهیم. برای تعریف Animation کد زیر را می نویسیم: به جای Name نام Animation را قرار می دهیم. داخل From و To باید Style های شروع و پایان Animation را بنویسیم. برای شروع من رنگ پس زمینه ی المانِ داری این Animation را عوض می کنم: حالا می خواهم این Animation را به المانم نسبت دهم. برای این کار می توانم از کد زیر استفاده کنم: درکد بالا ما در Style های المان مورد نظر مشخص کردیم که از Animation ما استفاده کند. در پراپرتی اول نام Animation و داخل پراپرتیِ animation-duration مدت زمانی که طول می کشد تا Animation اجرا شود را مشخص می کنیم. خروجی: می بینیم که در زمان اجرای صفحه رنگ پس زمینه تبدیل به قرمز می شود و کم کم به سمت آبی تغیر می کند. اما ممکن است ما بخواهیم Animation ما از قرمز شروع کند ، به آبی تغیر رنگ دهد و سپس به نارنجی تبدیل شود! بیهی است که برای این کار استفاده از کلمات from و To کافی نیست چون ما نیاز به مراحل بیشتری برای تغیر Style داریم. ما برای این کار می توانیم با دادن درصد مشخص کنیم که در چه مر حله از کار کدام Style اجرا شود: در کد بالا المان ما در شروع قرمز پر رنگ ، سپس در وسط کار آبی و در پایان نارنجی خواهد شد. خروجی: ما می توانیم مشخص کنیم که Animation ما در چه زمانی اجرا شود. برای این کار من به المان پراپرتی زیر را می دهم: می بینیم که Animation ما پس از 10 ثانیه اجرا می شود. اگر دقت کرده باشید Animation ما تنها یک بار اجرا می شود. ما می توانیم با استفاده از پراپرتی زیر مشخص کنیم که چند بار این Animation اجرا شود: خواهید دید که Animation تنها 2 بار اجرا خواهد شد. توجه داشته باشید که با دادن مقدارِ infinite به این پراپرتی Animation تا زمان باز بودن صفحه تکرار خواهد شد: اگر به خروجی بالا دقت کرده باشید حتما دریافتید که پس از اتمام یک Animation و در تکرار بعدیِ آن Animation از نو اجرا می شود و Style های آن به طور ناگهانی به حالت %0 تغیر پیدا می کند. ما می توانیم این روند را به شکلی تغیر دهیم که پس از اتمام اجرای یک Animation آن Animation به شکل عکس اجرا شود تا به 0% برسد یعنی مثلا در Animation بالا پس از تغیر رنگ المان به نارنجی رنگ آن دوباره به آبی و سپس به قرمز تغیر کند و دوباره از قرمز به آبی و به نارنجی تبدیل شود. برای این کار ما می توانیم از کد زیر استفاده کنیم: با دادن مقدار alternate نیز می توانیم آن را به حالت اول باز گردانیم: حتما از جلسه ی قبل transition-timing-function را به خاطر دارید. ما با استفاده از این پراپرتی سرعت اجرای Transition را در زمان های مختلف کنترل می کردیم. ما با استفاده از Animation- timing-function نیز می توانیم به همین شکل سرعت اجرای Animation ها را در زمان های مختلف کنترل کنیم: خب تا اینجای کار ما برای دادن Animation به المان خود چنین کد هایی نوشتیم: ما می توانیم با استفاده از یک پراپرتی Animation تمام این مقدار ها را مشخص کنیم: همانطور که می بینبید ما در کد بالا ابتدا نام سپس مدت زمان اجرا بعد سرعت اجرای Animation ها را در زمان های مختلف و بعد میزان تکرار و در آخر شکل تکرار Animation را مشخص کردیم. ممنون از همراهی شما عزیزان ITPRO باشید محمد پارسا صفوی انجمن تخصصی فناوری اطلاعات ایران - tosinso.com
#آموزش_css #طراحی_صفحات_وب_با_html_و_css #موزش_طراحی_وبسایت #آموزش_طراحی_وبسایت_با_css #آموزش_طراحی_صفحات_وب #آموزش_html #آموزش_طراحی_وبسایت_با_html
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....