Анимация множественного фона CSS

Анимация множественного фона CSS

От автора: анимация фона CSS долго служила поводом для горячих споров, в основном потому, что весьма очаровательно смотрится и не требует дополнительных элементов. Меня недавно спросили, можно ли добиться множественной фоновой анимации для данного элемента, и я ответил: да… с некоторыми оговорками. Давайте посмотрим, как ее сделать!

демо

CSS

Итак, несколько фоновых изображений в элементе – то, что мы уже некоторое время делаем, просто отделите их запятыми:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Обратите внимание, что фоновое изображение, которое будет самым верхним, должно быть в списке изображений первым. Анимация фона требует изменения background-position, также разделенных запятыми:

Результат – три движущихся участка внутри одного элемента!

Конечно, это неидеальный случай, так как нельзя менять background-position по отдельности и, таким образом, вам придется работать с одинаковой продолжительностью для каждого фонового изображения. Множественную анимацию можно установить на селекторы с помощью CSS, но так как это единственное изменяемое свойство, то нам просто не повезло!

Автор: David Walsh

Источник: http://davidwalsh.name/

Редакция: Команда webformyself.

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий