CSS для веб-дизайнеров.

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

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

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

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

CSS для веб-дизайнеров

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

ol#things li#things-3 a: hover img {

left: 45px;

}.

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