برای درک ساختار نشانه گذاری خود، اجازه دهید برای یک ثانیه روی قایق تمرکز کنیم:

>

>
>
>

حالا بیایید به اولین بنر در صفحه نمایشی نگاه کنیم. سه انیمیشن جداگانه در کشتی وجود دارد:

• انیمیشن - زمانی که قایق از سمت چپ می لغزد. این به طور مستقیم برای یک لیست نامرتب (گروهی از اقلام قایق) صدق می کند.
• انیمیشن - که به قایق جلوه ای تکان می دهد و قایق شناور روی آب را شبیه سازی می کند. این به طور مستقیم به عناصر لیست (برای قایق) صدق می کند.
• انیمیشن - که علامت سوال را پنهان می کند. این در مورد div (علامت سوال) صدق می کند.

اگر دریازده نشدید، دوباره به صفحه نمایشی نگاه کنید. خواهید دید که انیمیشنی که بر روی آیتم لیست (قایق) اعمال می شود و باعث بالا آمدن قایق می شود، DIV داخل آن را نیز تحت تاثیر قرار می دهد (با علامت سوال). علاوه بر این، انیمیشن "slide in" که بر روی یک لیست (گروه) نامرتب اعمال می شود نیز بر عنصر لیست و DIV درون آن (قایق و علامت سوال) تأثیر می گذارد. این ما را به مشاهدات مهمی می رساند:

عناصر کودک علاوه بر انیمیشن خود، انیمیشن را از والدین خود به ارث می برند.این دانش به زرادخانه ما اضافه شده است، اما تعداد فرزندان / والدین هنگام ایجاد یک انیمیشن ذهن شما (و پردازنده لپ تاپ مادربزرگتان) را منفجر می کند!

css

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

سبک های بازگشتی برای مرورگرهای قدیمی


ما فقط سبک های بازگشتی ایجاد می کنیم که گویی انیمیشن CSS وجود ندارد (این ایده که انیمیشن CSS وجود ندارد، هر بزرگسالی را نه تنها به گریه می اندازد، بلکه در کنار من آویزان می کند :)). به عبارت دیگر، اگر انیمیشن ما پخش نشود، بنر همچنان باید مناسب به نظر برسد. به این ترتیب، وقتی شخصی بنر را با استفاده از یک مرورگر قدیمی مشاهده می‌کند، به جای فضای خالی، یک بنر معمولی و ثابت را می‌بیند.

به عنوان مثال: اگر شخصی از CSS به این شکل استفاده کند، مشکلاتی وجود خواهد داشت:

/* راه اشتباه! */


0% (مادری: 0 ; )
100% (مادر بودن: 1 ; )
}

Div(
کدورت: 0 /* این بلوک به طور پیش فرض پنهان است!*/

}

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

اما نگران نباشید، ما پشتیبانی گسترده مرورگر را ارائه خواهیم کرد:

/* راه درست */

@keyframe our-fade-in-animation (
0% (مادری: 0 ; )
100% (مادر بودن: 1 ; )
}

Div(
کدورت: 1 /* این div به طور پیش فرض قابل مشاهده خواهد بود */
انیمیشن: our-fade-in-animation 1s 1 ;
}

همانطور که می بینید، حتی اگر انیمیشن پخش نشود، DIV همچنان نمایش داده می شود. اگر انیمیشن قادر به پخش باشد، DIV بلافاصله مخفی می شود و انیمیشن تا انتها پخش می شود.

اکنون که می دانیم چگونه بنرهای متحرک خود را از مرورگرهای قدیمی پشتیبانی کنیم، بیایید به چند CSS اساسی برویم.

سه نکته کلیدی وجود دارد که باید در نظر داشت:

• از آنجا که این تبلیغات ممکن است در وب سایت های مختلف استفاده شود، ما تمام سبک های CSS خود را بسیار خاص خواهیم کرد. ما شروع به اعلام هر انتخابگر با id: #ad-1 می کنیم. این باعث می شود سبک های بنر ما توسط سبک ها و عناصر موجود تداخل پیدا نکنند.
• ما هدفمند خواهیم بود عملکرد تاخیر انیمیشن را نادیده بگیریدهنگام ایجاد انیمیشن ما اگر بخواهیم از ویژگی تاخیر انیمیشن و همچنین طراحی برای عناصر خود به روشی درست (قابل مشاهده به طور پیش فرض) استفاده کنیم، قبل از اینکه انیمیشن در نهایت پخش شود، همه آن روی صفحه قابل مشاهده خواهد بود. به همین دلیل است که انیمیشن بلافاصله شروع می شود، که به ما اجازه می دهد تا عناصر را از صفحه پنهان کنیم تا زمانی که به آنها نیاز داشته باشیم. ما تاخیر انیمیشن را با افزایش مدت زمان و تنظیم دستی فریم های کلیدی شبیه سازی می کنیم. با شروع ساخت انیمیشن، نمونه هایی از این را خواهید دید.
• در صورت امکان، از یک انیمیشن برای چندین عنصر استفاده کنید. به این ترتیب می توانیم در زمان زیادی صرفه جویی کنیم و نفخ کد را کاهش دهیم. شما می توانید چندین افکت مختلف را در یک انیمیشن با تنظیم مدت زمان و انتقال ایجاد کنید.

بنابراین، ما شروع به ساخت بنر تبلیغاتی خود خواهیم کرد. بیایید مطمئن شویم که موقعیت نسبی (موقعیت: نسبی) دارد تا عناصر داخل آن به درستی قرار گیرند. همچنین باید مطمئن شویم که سرریز: خاصیت hidden برای مخفی کردن هر چیز دیگری تنظیم شده است:

#ad-1 (
عرض: 720 پیکسل
ارتفاع: 300 پیکسل
شناور به سمت چپ ؛
حاشیه : 40 پیکسل خودکار 0 ;
background-image : url (../images/ad-1/background.png );
background-position : center ;
background-repeat : no-repeat ;
سرریز: پنهان
موقعیت : نسبی ;
box-shadow: 0px 0px 6px #000 ;
}

#ad-1 #محتوا(
عرض: 325 پیکسل
شناور : راست ;
حاشیه: 40 پیکسل
text-align : center ;
z-index : 4 ;
موقعیت : نسبی ;
سرریز: قابل مشاهده
}
#ad-1 h2 (
font-family : "Alfa Slab One" , شکسته ;
رنگ : #137dd5 ;
اندازه فونت: 50 پیکسل
ارتفاع خط: 50 پیکسل

انیمیشن: تاخیری-محو-انیمیشن 7s 1 ease-in-out; /* H2 با تاخیر شبیه سازی شده انیمیشن محو می شود */
}
#ad-1 h3 (

رنگ : #202224 ;
اندازه فونت: 31px;
ارتفاع خط: 31 پیکسل
text-shadow : 0px 0px 4px #fff ;
انیمیشن: تاخیری-محو-انیمیشن 10s 1 ease-in-out; /* H3 با تاخیر شبیه سازی شده انیمیشن محو می شود */
}
فرم #ad-1 (
حاشیه : 30px 0 0 6px ;
موقعیت : نسبی ;
انیمیشن: فرم-انیمیشن 12s 1 ease-in-out; /* این کد فرم ایمیل ما را جابجا می کند */
}
#ad-1 #ایمیل (
عرض: 158 پیکسل
ارتفاع : 48 پیکسل
شناور به سمت چپ ؛
padding: 020px
اندازه فونت : 16px ;
font-family : "Lucida Grande" , sans-serif ;
رنگ : #fff ;
text-shadow : 1px 1px 0px #a2917d ;
شعاع حاشیه-بالا-چپ: 5 پیکسل ;
شعاع حاشیه-پایین-چپ: 5 پیکسل ;
حاشیه: 1px جامد #a2917d ;
طرح کلی : هیچ ;
box-shadow: -1px -1px 1px #fff ;
background-color : #c7b29b ;
پس‌زمینه-تصویر: خطی-gradient(پایین، rgb (216، 201، 185) 0٪، rgb (199، 178، 155) 100٪).
}
#ad-1 #email :focus (
پس‌زمینه-تصویر: خطی-gradient(پایین، rgb (199، 178، 155) 0٪، rgb (199، 178، 155) 100٪).

}
#ad-1 #submit (
ارتفاع: 50 پیکسل
شناور به سمت چپ ؛
مکان نما : اشاره گر ;
padding: 020px
اندازه فونت : 20px ;
font-family : "Boogaloo" , شکسته ;
رنگ : #137dd5 ;
text-shadow : 1px 1px 0px #fff ;
حاشیه-بالا-راست-شعاع: 5px ;
حاشیه-پایین-راست-شعاع: 5px ;
حاشیه: 1px جامد #bcc0c4 ;
لبه سمت چپ: هیچ
background-color : #fff ;
پس‌زمینه-تصویر: خطی-gradient(پایین، rgb (245، 247، 249) 0٪، rgb (255، 255، 255) 100٪).
}
#ad-1 #submit :hover (
پس‌زمینه-تصویر: خطی-gradient(پایین، rgb (255، 255، 255) 0٪، rgb (255، 255، 255) 100٪).
}

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

#ad-1 ul#water (
/* اگر بخواهیم انیمیشن دیگری برای آب اضافه کنیم (مثلاً حرکت افقی)، می توانیم این کار را اینجا انجام دهیم */
}
#ad-1 li#water-back (
عرض: 1200 پیکسل
ارتفاع : 84 پیکسل ;
background-image : url (../images/ad-1/water-back.png );

z-index : 1 ;
موقعیت : مطلق ;
پایین: 10 پیکسل
سمت چپ: -20 پیکسل
انیمیشن: water-back-animation 3s infinite ease-in-out; /* جلوه پرش آب */
}
#ad-1 li#آب جلو (
عرض: 1200 پیکسل
ارتفاع : 158 پیکسل ;
تصویر پس زمینه: آدرس اینترنتی ( ../images/ad-1/waterfront.png) ;
background-repeat : repeat-x ;
z-index : 3 ;
موقعیت : مطلق ;
پایین: -70 پیکسل
سمت چپ: -30 پیکسل
انیمیشن: water-front-animation 2s infinite ease-in-out; /* یکی دیگر از اثرات پرش آب - کمی متفاوت است. ما این انیمیشن را کمی سریع‌تر می‌سازیم تا چشم‌اندازی به شما بدهد. */
}

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

#ad-1 ul# boat (
عرض: 249 پیکسل
ارتفاع: 215 پیکسل
z-index : 2 ;
موقعیت : مطلق ;
پایین: 25 پیکسل
سمت چپ: 20 پیکسل
سرریز: قابل مشاهده
انیمیشن: boat-in-animation 3s 1 ease-out; /* گروه را به ابتدا منتقل کنید */
}
#ad-1 ul#boat li (
عرض: 249 پیکسل
ارتفاع: 215 پیکسل
background-image : url (../images/ad-1/boat.png ) ;
موقعیت : مطلق ;
پایین: 0 پیکسل
سمت چپ: 0 پیکسل
سرریز: قابل مشاهده
انیمیشن: boat-animation 2s infinite ease-in-out; /* تقلید یک قایق که روی آب می پرد - انیمیشن مشابهی قبلاً برای خود آب استفاده شده است. */
}
#ad-1 #علامت سوال (
عرض: 24 پیکسل
ارتفاع: 50 پیکسل
تصویر پس زمینه: آدرس اینترنتی ( ../images/ad-1/question-mark.png) ;
موقعیت : مطلق ;
سمت راست: 34 پیکسل
بالا : -30px
انیمیشن: تاخیری-محو-انیمیشن 4s 1 ease-in-out; /* علامت سوال را مخفی کنید */
}

در نهایت برای گروه ابرها و برای یک ابر استایل هایی ایجاد می کنیم. ما همچنین یک انیمیشن نسبتاً جذاب را راه اندازی خواهیم کرد که به آنها جلوه پیمایش مداوم می دهد. در اینجا یک تصویر از آنچه رخ خواهد داد:



اینها سبک ها هستند:

#ad-1 #ابرها (
موقعیت : مطلق ;
بالا : 0px ;
z-index : 0
انیمیشن: ابر انیمیشن 30s بی نهایت خطی; /* ابرها را به سمت چپ حرکت دهید، بی نهایت بار */
}
#ad-1 #cloud-group-1 (
عرض: 720 پیکسل
موقعیت : مطلق ;
سمت چپ: 0 پیکسل
}
#ad-1 #cloud-group-2 (
عرض: 720 پیکسل
موقعیت : مطلق ;
سمت چپ : 720 پیکسل ;
}
#ad-1 .cloud-1 (
عرض: 172 پیکسل
ارتفاع : 121px
background-image : url (../images/ad-1 /cloud-1 .png) ;
موقعیت : مطلق ;
بالا : 10 پیکسل ;
سمت چپ: 40 پیکسل
}
#ad-1 .cloud-2 (
عرض: 121px;
ارتفاع: 75 پیکسل
background-image : url (../images/ad-1 /cloud-2 .png) ;
موقعیت : مطلق ;
بالا : -25px
سمت چپ: 300 پیکسل
}
#ad-1 .cloud-3 (
عرض: 132 پیکسل
ارتفاع: 105 پیکسل
background-image : url (../images/ad-1 /cloud-3 .png) ;
موقعیت : مطلق ;
بالا : -5px
سمت چپ : 530 پیکسل ;
}

اوفف اینجا کدهای CSS زیادی وجود داشت. اما جالب ترین چیز بیشتر است!

انیمیشن


به یاد داشته باشید: تا این مرحله، هیچ انیمیشن واقعی وجود نداشت. اگر بخواهید اکنون بنر را مشاهده کنید، چیزی را مشاهده می کنید که حتی یک مرورگر قدیمی نمایش می دهد - یک تبلیغ ثابت. از جانباکنونما در واقع انیمیشنی را که قبلاً در کد CSS خود فراخوانی کرده ایم ایجاد خواهیم کرد.

اکنون که بنر ما به خوبی نمایش داده می شود، بیایید این تبلیغ ثابت را ادویه کنیم! بیایید مستقیماً به کد برویم - در نظرات به شما خواهم گفت که چه اتفاقی خواهد افتاد:

نتیجه

در این دوره آموزشی، نکات کلیدی ساخت انیمیشن با پشتیبانی از مرورگرهای قدیمی را یاد گرفتیم:

1. عناصر کودک علاوه بر انیمیشن خود، انیمیشن والدین خود را به ارث می برند. ما می توانیم از این برای ایجاد انیمیشن های پیچیده تر استفاده کنیم.
2. برای سبک های تبلیغاتی خود، باید از انتخابگرهای بسیار خاصی استفاده کنیم تا تبلیغات ما تحت تأثیر سایر سبک های سایت قرار نگیرد.
3. ما باید عناصر را به گونه‌ای طراحی کنیم که اگر انیمیشن ما پخش نشد، تبلیغ همچنان باید مناسب به نظر برسد.
4. در صورت امکان، از یک انیمیشن برای چندین عنصر استفاده کنید - باعث صرفه جویی در زمان و جلوگیری از نفخ کد می شود.
5. ما اغلب از اینترنت اکسپلورر به عنوان "مرورگر قرن هجدهم" یاد می کنیم در حالی که مشت خود را از انزجار و عصبانیت تکان می دهیم. :)

در آزمایش های CSS خود موفق باشید.

بیایید با استفاده از CSS3 یک بنر تبلیغاتی بسازیم. در حال حاضر فقط مرورگرهای فایرفاکس و WebKit به طور کامل از انیمیشن های CSS3 پشتیبانی می کنند. اما کافی است که بنر در مرورگرهای دیگر کار کند. با این حال، در همه جا (مخصوصاً در IE 7 و بالاتر) با آزمایش آخرین تکنیک های CSS، انتظار عملکرد عالی را نداشته باشید.

توجه داشته باشید:برای صرفه جویی در فضا در صفحه، تمام پیشوندهای فروشنده مرورگر حذف شده اند. کد منبع را ببینید.

نشانه گذاری HTML

ابتدا به ساختار بنر در HTML نگاه می کنیم. در این مرحله، باید تصور کنیم که انیمیشن چگونه عمل می کند:

گمشده؟

آرام باشید - ما کمک خواهیم کرد.



برای درک عمیق تر از ساختار نشانه گذاری، بیایید روی قایق تمرکز کنیم:

سه انیمیشن با قایق رخ می دهد:

لغزش قایق در سمت چپ. برای یک لیست (گروه) نامرتب اعمال می شود.

شبیه سازی تکان خوردن قایق روی آب. در مورد فهرست (قایق) اعمال شد.

ظاهر یک علامت سوال. برای یک عنصر div (علامت سوال) اعمال می شود.

اگر به صفحه نمایشی نگاه کنید، می بینید که انیمیشن مورد لیست (قایق) نیز بر عنصر div داخل آن (علامت سوال) تأثیر می گذارد. همچنین، انیمیشن "لغزش" برای یک لیست نامرتب بر آیتم لیست (قایق و علامت سوال) تاثیر می گذارد.

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

css

قبل از شروع تجزیه و تحلیل ایجاد یک انیمیشن، باید ارائه دهید سازگار با عقببا مرورگرهای قدیمی

سازگاری به عقب

ما به سادگی با استایل دادن به نشانه‌گذاری، سازگاری رو به عقب را تضمین می‌کنیم انیمیشن های CSSاصلا وجود ندارد اگر شخصی صفحه را در یک مرورگر قدیمی مشاهده کند، یک تصویر ثابت معمولی خواهد دید، نه یک فضای سفید خالی.

به عنوان مثال: آیا باید از CSS استفاده کنم؟ مانند تصویر زیر، مشکلاتی وجود خواهد داشت:

/* نه به درستی! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* این div به طور پیش فرض پنهان است - اوه!*/ انیمیشن: ما -fade-in-animation 1s 1;)

اگر مرورگر از انیمیشن پشتیبانی نکند، عنصر div برای کاربر نامرئی خواهد ماند.

به این ترتیب ما از سازگاری عقب مانده با مرورگرهای قدیمی اطمینان حاصل می کنیم:

/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* این div به طور پیش فرض قابل مشاهده است */ انیمیشن: ما -fade-in-animation 1s 1;)

حالا عنصر div حتی اگر انیمیشن اجرا نشود رندر می شود. و در مرورگرهای مدرن div ابتدا در طول انیمیشن پنهان می شود.

بنیاد

اکنون می دانیم که چگونه از سازگاری با عقب اطمینان حاصل کنیم (که به جلوگیری از مشکلات هنگام کار با پروژه های واقعی کمک می کند). وقت آن است که پایه کد CSS خود را ایجاد کنیم.

شما باید 3 نکته را به خاطر بسپارید:

از آنجایی که این بنر در سایت های مختلف استفاده خواهد شد، ما همه انتخابگرهای CSS خود را خاص خواهیم کرد.همه آنها با #ad-1 شروع خواهند شد. بنابراین، ما سعی خواهیم کرد از همپوشانی کد خود و کد سایت جلوگیری کنیم.

ما عمداً تاخیر انیمیشن را نادیده می گیریمدر تنظیمات اگر هنگام تنظیم سبک‌ها با قابلیت مشاهده عناصر پیش‌فرض از تاخیر انیمیشن استفاده کنید، ساختار بنر با ناپدید شدن یا ظاهر شدن ناگهانی قسمت‌هایی از تصویر پس از تکمیل انیمیشن شکسته می‌شود. تاخیر انیمیشن با مدت زمان و تنظیم فریم شبیه سازی می شود.

در صورت امکان از یک انیمیشن برای چندین عنصر استفاده کنید.بنابراین، ما در زمان صرفه جویی می کنیم و حجم کد را کاهش می دهیم.

بنابراین ما اساس بنر خود را ایجاد می کنیم. بیایید آن را روی موقعیت نسبی تنظیم کنیم تا عناصر داخلی به درستی قرار گیرند. همچنین هر چیزی را که خارج از محدوده عنصر است پنهان می کند:

#ad-1 (عرض: 720 پیکسل؛ ارتفاع: 300 پیکسل؛ شناور: چپ؛ حاشیه: 40 پیکسل خودکار 0؛ تصویر پس‌زمینه: url(../images/ad-1/background.png؛ موقعیت پس‌زمینه: مرکز؛ پس‌زمینه -تکرار: بدون تکرار؛ سرریز: پنهان؛ موقعیت: نسبی؛ کادر سایه: 0px 0px 6px #000؛)

سپس استایل هایی را برای فیلدهای متن و ورودی تنظیم می کنیم. ما انیمیشن های مناسب را می نامیم. همچنین باید مطمئن شوید که محتوا دارای بالاترین شاخص z برای قطعات متحرک است تا با هم تداخل نداشته باشند:

#ad-1 #content ( عرض: 325 پیکسل؛ شناور: راست؛ حاشیه: 40 پیکسل؛ تراز متن: مرکز؛ شاخص z: 4؛ موقعیت: نسبی؛ سرریز: قابل مشاهده؛ ) #ad-1 h2 (فونت-خانواده: "Alfa Slab One"، خط شکسته؛ رنگ: #137dd5؛ اندازه قلم: 50px؛ ارتفاع خط: 50px؛ متن سایه: 0px 0px 4px #fff؛ انیمیشن: delayed-fade-animation 7s 1 ease-in-out. /* h2 با تأخیر جعلی ظاهر شود */ ) #ad-1 h3 ( font-family: "Boogaloo"، خط شکسته؛ رنگ: #202224؛ اندازه قلم: 31px؛ ارتفاع خط: 31px؛ text-shadow: 0px 0px 4px #fff؛ انیمیشن: delayed-fade-animation 10s 1 ease-in-out; /* h3 با تاخیر شبیه سازی شده ظاهر شود */ ) فرم #ad-1 ( حاشیه: 30px 0 0 6px؛ موقعیت: نسبی؛ انیمیشن: فرم-انیمیشن 12s 1 ease-in-out؛ /* فرم را بیرون بکشید تا یک آدرس ایمیل با تاخیر شبیه سازی شده وارد کنید */ ) #ad-1 #email ( عرض: 158 پیکسل؛ ارتفاع: 48 پیکسل؛ شناور: سمت چپ؛ بالشتک: 0 20 پیکسل. اندازه قلم: 16 پیکسل؛ خانواده فونت: "Lucida Grande"، sans-serif؛ رنگ: #fff؛ متن-سایه: 1px 1px 0px #a2917d؛ حاشیه-بالا-چپ-شعاع: 5px؛ حاشیه r-bottom-left-radius: 5px; حاشیه: 1px جامد #a2917d; طرح کلی: هیچ box-shadow: -1px -1px 1px #fff; پس زمینه رنگ: #c7b29b; تصویر پس‌زمینه: گرادیان خطی (پایین، rgb(216,201,185) 0%, rgb(199,178,155) 100%). ) #ad-1 #email:focus ( پس‌زمینه-تصویر: خطی-gradient (پایین، rgb(199,178,155) 0%, rgb(199,178,155) 100%)؛ ) #ad-1 #submit ( ارتفاع: 50px؛ شناور: سمت چپ ؛ مکان نما: اشاره گر؛ بالشتک: 0 20 پیکسل؛ اندازه قلم: 20 پیکسل؛ خانواده فونت: "Boogaloo"، خط شکسته؛ رنگ: #137dd5؛ متن-سایه: 1px 1px 0px #fff؛ حاشیه-بالا-راست-شعاع: 5px ؛ حاشیه-پایین-راست-شعاع: 5px؛ حاشیه:1px جامد #bcc0c4؛ حاشیه-چپ: هیچکدام؛ پس‌زمینه-رنگ: #fff؛ پس‌زمینه-تصویر: خطی- گرادیان (پایین، rgb(245،247،249) 0%, rgb( 255,255,255) 100%)؛ ) #ad-1 #submit:hover ( پس‌زمینه-تصویر: گرادیان خطی (پایین, rgb(255,255,255) 0%, rgb(255,255,255) 100%)؛ )

حالا بیایید آب را استایل کنیم و انیمیشن مناسب را صدا کنیم:

#ad-1 ul#water( /* اگر به انیمیشن آبی دیگری نیاز دارید، می توانید آن را در اینجا اضافه کنید */ ) #ad-1 li#water-back ( عرض: 1200 پیکسل؛ ارتفاع: 84 پیکسل؛ پس زمینه تصویر: url(. . /images/ad-1/water-back.png؛ پس‌زمینه-تکرار: تکرار-x؛ z-index: 1؛ موقعیت: مطلق؛ پایین: 10 پیکسل؛ سمت چپ: -20 پیکسل؛ انیمیشن: water-back-animation 3s سهولت بی نهایت در خروج؛ /* تقلید از امواج پاشیده */ ) #ad-1 li#water-front ( عرض: 1200 پیکسل؛ ارتفاع: 158 پیکسل؛ تصویر پس زمینه: آدرس اینترنتی (../images/ad-1/water -front .png)؛ پس‌زمینه-تکرار: تکرار-x؛ شاخص z: 3؛ موقعیت: مطلق؛ پایین: -70 پیکسل؛ سمت چپ: -30 پیکسل؛ انیمیشن: آب جلو-انیمیشن 2s infinite ease-in-out؛ / * سایر انیمیشن‌های امواج پاشش کمی سریع‌تر اجرا می‌شوند تا جلوه پرسپکتیو ایجاد کنند. */ )

سبک های قایق و عناصر آن را تنظیم کنید. ما انیمیشن های مناسب را نیز می نامیم:

#ad-1 ul#boat ( عرض: 249 پیکسل؛ ارتفاع: 215 پیکسل؛ z-index: 2؛ موقعیت: مطلق؛ پایین: 25 پیکسل؛ سمت چپ: 20 پیکسل؛ سرریز: قابل مشاهده؛ انیمیشن: قایق در انیمیشن 3s 1 ease-out ; /* وقتی تبلیغ شروع می شود گروه را به داخل اسلاید می کند */ ) #ad-1 ul#boat li ( عرض: 249px; ارتفاع: 215px; background-image: url(../images/ad-1/boat.png); موقعیت: مطلق؛ پایین: 0 پیکسل؛ سمت چپ: 0 پیکسل؛ سرریز: قابل مشاهده؛ انیمیشن: قایق-انیمیشن 2s infinite ease-in-out؛ /* شبیه سازی قایق در آب - شبیه به انیمیشنی که قبلاً در خود آب استفاده شده است. */ ) #ad-1 #question-mark ( عرض: 24px؛ ارتفاع: 50px؛ پس‌زمینه-تصویر: url(../images/ad-1/question-mark.png)؛ موقعیت: مطلق؛ سمت راست: 34px. بالا: -30px؛ انیمیشن: delayed-fade-animation 4s 1 ease-in-out؛ /* محو شدن در علامت سوال */ )

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



و این هم کد CSS:

#ad-1 #clouds ( موقعیت: مطلق؛ بالا: 0px؛ z-index: 0؛ انیمیشن: cloud-animation 30s بی نهایت خطی؛ /* ابرها را به چپ اسکرول کنید، تنظیم مجدد و تکرار کنید */ ) #ad-1 #Cloud-group -1 ( عرض: 720 پیکسل؛ موقعیت: مطلق؛ چپ: 0 پیکسل؛ ) #ad-1 #cloud-group-2 ( عرض: 720 پیکسل؛ موقعیت: مطلق؛ سمت چپ: 720 پیکسل؛ ) #ad-1 .cloud-1 ( عرض : 172 پیکسل؛ ارتفاع: 121 پیکسل؛ تصویر پس‌زمینه: url(../images/ad-1/cloud-1.png؛ موقعیت: مطلق؛ بالا: 10 پیکسل؛ سمت چپ: 40 پیکسل؛ ) #ad-1 .cloud-2 (عرض: 121 پیکسل؛ ارتفاع: 75 پیکسل؛ تصویر پس‌زمینه: url(../images/ad-1/cloud-2.png؛ موقعیت: مطلق؛ بالا: -25 پیکسل؛ سمت چپ: 300 پیکسل؛ ) #ad-1. cloud-3 (عرض: 132 پیکسل؛ ارتفاع: 105 پیکسل؛ تصویر پس‌زمینه: url (../images/ad-1/cloud-3.png؛ موقعیت: مطلق؛ بالا: -5 پیکسل؛ سمت چپ: 530 پیکسل؛ )

تصاوير متحرك

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

حال بیایید به تصویر استاتیک زیبای خود جان بدهیم:

/* یک انیمیشن با تاخیر شبیه سازی شده برای نمایش چندین عنصر استفاده می شود. شبیه سازی تاخیر با شروع فرآیند با ادامه 80 درصد انیمیشن (و نه بلافاصله) انجام می شود. به این ترتیب می‌توانید هر تاخیری را شبیه‌سازی کنید: */ @keyframes delayed-fade-animation ( 0% (تاری: 0;) 80% (تاری: 0;) 100% (تاری: 1;)) /* انیمیشن برای نمایش فرم با آدرس ایمیلو دکمه همچنین از تاخیر شبیه‌سازی شده */@keyframes فرم-انیمیشن استفاده می‌کند ( 0% (تصویر: 0؛ سمت راست: -400 پیکسل؛) 90% (تماندگی: 0؛ سمت راست: -400 پیکسل؛) 95% (تأت: 0.5؛ راست: 20 پیکسل؛ ) 100% (تاری: 1؛ راست: 0 پیکسل؛) ) /* این انیمیشن برای بیرون آوردن قایق از صفحه نمایش در ابتدای ویدیو استفاده می شود: */ @keyframes boat-in-animation ( 0% (سمت چپ: -200px;) 100% (سمت چپ: 20px;) ) /* انیمیشن برای ابرها. گروه اول ابرها از مرکز شروع به حرکت می کنند و دسته دوم - به سمت راست صفحه. گروه اول به آرامی از صفحه نمایش حذف می شود و گروه دوم در سمت راست ظاهر می شود. هنگامی که گروه سمت چپ کاملاً پنهان شد، ابرها به سرعت به موقعیت اصلی خود باز خواهند گشت: */ @keyframes cloud-animation ( 0% (سمت چپ: 0px;) 99.9999% (سمت چپ: -720px;) 100% (سمت چپ: 0px; ) ) / * سه انیمیشن آخر تقریباً یکسان هستند - تفاوت در موقعیت قرارگیری عناصر نهفته است. آنها از پخش شدن امواج اقیانوس تقلید می کنند: */ @keyframes boat-animation ( 0% (پایین: 0px؛ سمت چپ: 0px؛) 25% (پایین: -2px؛ سمت چپ: -2px؛) 70% (پایین: 2px؛ سمت چپ) : - 4px;) 100% (پایین: -1px؛ سمت چپ: 0px;) ) @keyframes water-back-animation ( 0% (پایین: 10px؛ سمت چپ: -20px؛) 25% (پایین: 8px؛ سمت چپ: - 22px; ) 70% (پایین: 12 پیکسل؛ سمت چپ: -24 پیکسل؛) 100% (پایین: 9 پیکسل؛ سمت چپ: -20 پیکسل؛) ) @keyframes water-front-animation ( 0% (پایین: -70px؛ سمت چپ: -30px ;) 25% (پایین: -68 پیکسل؛ سمت چپ: -32 پیکسل؛) 70٪ (پایین: -72 پیکسل؛ سمت چپ: -34 پیکسل؛) 100٪ (پایین: -69 پیکسل؛ سمت چپ: -30 پیکسل؛) )

نتیجه

در این درس چند مفهوم کلیدی را یاد گرفتیم:

1. عناصر نسل علاوه بر انیمیشن هایشان، انیمیشن های والدین خود را نیز دریافت می کنند.
2. هنگام ایجاد یک بنر، باید سعی کنید از یک شناسه منحصر به فرد برای جلوگیری از همپوشانی کد با یک پروژه CSS موجود استفاده کنید.
3. عناصر باید طوری قرار داده شوند که گویی انیمیشن در دسترس نیست تا از سازگاری با عقب اطمینان حاصل شود.
4. در صورت امکان، باید از یک انیمیشن برای چندین عنصر استفاده کنید.

بدون شک یکی از درخشان ترین روند 2012توسعه در است CCS3، HTML5. امروز ما ارائه می دهیم بزرگ و بسیار مروری مفیدمثال ها" 20+: آموزش های خلاقانه و مفید CSS3″ارائه شده در پسر لکه دار. همه نمونه ها در بدون جاوا اسکریپت پاک کنید، در درس های ارائه شده نسخه آزمایشی و فایل های آماده CSS3 برای دانلود وجود دارد.

ما مطمئن هستیم که این ترفندها و تکنیک ها برای توسعه دهندگان وب مفید خواهد بود!

درس های css3 :

1. گالری عکس CSS3، لغزنده، جلوه های تصویر

1.1. لغزنده CSS3

باورش سخت است، اما این نوار لغزنده با افکت های مختلف منحصراً بر روی CSS3 ساخته شده است، بسیار چشمگیر است.

1.2. پس زمینه وب سایت تمام صفحه با جلوه لغزنده CSS3

مدت‌هاست که طراحان وب پیشینه‌های مختلف را برای یک وب‌سایت تجربه کرده‌اند، اما تا کنون CSS خالصمی توانست خیلی کم انجام دهد، مجبور به استفاده از JS شد. اکنون CSS3 این امکان را به شما می‌دهد تا با پس‌زمینه سایت خود به دلخواه خود انجام دهید - می‌توانید یک پس‌زمینه با یک عکس بزرگ با کیفیت بالا داشته باشید، می‌توانید چندین پس‌زمینه را با جلوه‌های مختلف و با مقیاس‌پذیری پس‌زمینه بسته به پارامترهای صفحه تغییر دهید. به طور کلی، یک فرصت شگفت انگیز برای سایت های خلاق.

1.3. لایت باکس در CSS3

با این آموزش می توانید یاد بگیرید که چگونه یک لایت باکس (Lightbox) با افکت های متنوع بر روی CSS خالص ایجاد کنید.

1.4. ویژگی های تصویر CSS3

این آموزش ویژگی‌های جدید CSS3 را برای ویژگی‌های تصویر، مانند گوشه‌های گرد، سایه‌ها و جلوه‌های دیگر نشان می‌دهد.

1.5. بنر متحرک CSS3

1.6. نوار بارگذاری CSS3

1.7. روبان سه بعدی با CSS3



نمایش نسخه ی نمایشی یا دانلود فایل های کد CSS3 →

2. منوها، ناوبری و دکمه های CSS3

2.1. منوی Apple.com در CSS3

آموزش ساخت منوی معروف Apple.com در CSS3.

2.2. منوی افقی متحرک CSS3

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

2.3. منوی عمودی متحرک در CSS3

2.4. دکمه های متحرک CSS3

آموزش عالی با 7 نمونه از دکمه های خلاقانه متحرک.

2.5. منوی متحرک خلاقانه با تصاویر CSS3

در این درس، از 10 مثال ارائه شده، فقط چشم ها بالا می روند. چنین منوهای خلاقانه پیچیده ای قبلاً منحصراً با کمک JS ایجاد می شد. چشمگیر!

2.6. جلوه ناوبری دایره با CSS3

یک جلوه غیرمعمول هنگام نگه داشتن ماوس روی مورد ناوبری انتخاب شده به شکل یک دایره با یک تصویر. توجه می کنیم!

2.7. منوی کشویی در CSS3

آموزش پیاده سازی یک منوی کشویی ساده با سطوح فرعی در CSS3.

2.8. ناوبری CSS3 با انتقال متحرک

3. اثرات مختلف در CSS3

3.1. راهنمای ابزار متحرک CSS3 بدون jQuery