Интересное подключение анимации

Интересная анимация

Собственно, это не какой-то "мудрёный" способ GIF-анимации. Она так же создаётся в фотошоп. Интересен только особый способ её подключения к HTML-странице. Чем именно отличается этот метод от обычного?

Анимированную GIF-картинку я подключил не напрямую в HTML-код, а прописал её через таблицу стилей CSS, как фоновую для ссылки, используя технику псевдоселекторов. Сам стартовый рисунок, что интересно, имеет формат JPG.

* * *

Наведите курсор мыши на рисунок - анимация сразу начнёт проигрываться. Если уберёте в сторону - остановится.
Кликнув по рисунку, откроете его же, но уже с добавочным оформлением информации.

Надеюсь, Вам понравился такой необычный, интересный способ подключения простой GIF-анимации через стартовый рисунок другого формата.

Таким образом можно создавать оригинальные, красивые анимации для презентаций, для всевозможных шоу, предложений услуг и прочее.

Заключение

Особенно интересен показанный способ создания анимаций тем, что всё сделано без использования каких-либо скриптов.
Большая часть работы выполнялась, разумеется, в фотошоп, а дальше - HTML+CSS только!

*P.S.
Образец создавался по заказу, и оригинал содержит в три раза больше анимированных картинок, но для своего портфолио я оставил всего несколько.

* * *

Наведите курсор мыши на стрелки - появятся подсказки, куда они ведут.

ВВЕРХ