Как да създадете анимиран CSS3 банер, RUDEBOX

Следователно е възможно неправилно показване и известно забавяне в по-старите браузъри. Демото показва две опции за банер: хоризонтален и вертикален. Ще започнем със създаването наHTML маркиране, в това маркиране можете да разберете цялата структура на нашия банер и да направите необходимите промени в него:

Трябва да се съсредоточите върху такъв елемент като лодка по-подробно, описанието е дадено в кода:

С лодката се появяват три анимации:

1. Подхлъзване на лодката отляво. Прилага се към неподреден списък (група).
2. Симулация на люлееща се лодка по водата. Приложено към елемента от списъка (лодка).
3. Появата на въпросителен знак. Прилага се към елемент div (въпросителен знак).

Разглеждайки демонстрационната страница, страхотно е да видите, че анимацията за елемента от списъка (лодката) също засяга елемента div вътре в него (въпросителния знак). Също така, анимацията за "приплъзване" за неподреден списък засяга елемента от списъка (лодката и въпросителния знак).

Обратна съвместимост:

Ще постигнем обратна съвместимост, като просто стилизираме маркирането, сякаш CSS анимациите изобщо не съществуват. Ако някой прегледа страницата в стар браузър, ще види нормално статично изображение, а не празно бяло пространство.

Ако браузърът не поддържа анимация, тогава елементът div ще остане невидим за потребителя. Ето как гарантираме обратна съвместимост с по-стари браузъри:

Сега елементът div ще се изобрази дори ако анимацията не успее да се изпълни. И в съвременните браузъри div първо ще бъде скрит по време на анимацията.

Сега знаем как да осигурим обратна съвместимост (което ще помогне да се избегнат проблеми при работа с реални проекти).Време е да създадем основата на нашия CSS код.

Трябва да запомните 3 точки:

1. Тъй като банерът ще се използва на различни сайтове, ние ще направим всички наши CSS селектори специални. Всички те ще започват с #ad-1. По този начин ще се опитаме да избегнем припокриването на нашия код и кода на сайта.
2. Умишлено игнорираме забавянето на анимацията в настройките. Ако използвате забавяне на анимацията, когато задавате стилове с видимост на елемента по подразбиране, тогава структурата на банера ще бъде нарушена от внезапното изчезване или появяване на части от картината след завършване на анимацията. Забавянето на анимацията се симулира от настройката за продължителност и рамка.
3. Когато е възможно, използваме една анимация за няколко елемента. Така спестяваме време и намаляваме размера на кода.

Така създаваме основата за нашия банер. Нека го настроим на относително позициониране, така че вътрешните елементи да могат да бъдат поставени правилно. Той също така ще скрие всичко, което излиза извън обхвата на елемента:

---