Книга: CSS3 для веб-дизайнеров

Ускользающая космическая кошка

Ускользающая космическая кошка

Мы можем добавить CSS-переход на весь набор свойств (не только CSS3). Достаточно сгладить изменение положения, чтобы космическая кошка выглядела так, будто бы она ускользает от мыши.

Когда свойство left у изображения в состоянии hover изменяется, общий переход будет сглаживать это изменение и кошка будет выглядеть так, будто бы она скользит из стороны в сторону.

Сдвинем ее на 15px вправо, повышая значение left с 30pxдо 45px (рис. 4.21):


Рис. 4.21. Кошка скользит туда и обратно, как она часто делает

ol#things li#things-3 a: hover img {
left: 45px;
}

Довольно просто. Вся магия здесь осуществляется CSS-переходом (ее сложно изобразить на листе бумаги).

Оглавление книги


Генерация: 2.276. Запросов К БД/Cache: 3 / 1
поделиться
Вверх Вниз