фоновое изображение Луны, которая будет отображаться позади каждого предмета, и укажем ширину и высоту каждой ссылки (рис. 4.18):
Рис. 4.18. Элементы списка, теперь с изображением Луны на фоне
ol#things li a {
float: left;
width: 137px;
height: 91px;
background: url(../img/moon-137.jpg)
no-repeat top left;
}
Общее правило
Следующий шаг – написать общее правило, которое абсолютно спозиционирует каждое изображение внутри элемента списка и, соответственно, поверх изображения Луны.
Каждый элемент будет спозиционирован по-своему в зависимости от объекта; также будут использоваться различные преобразования. Но мы можем объявить position: absolute; для всех изображений, так что не придется дублировать это правило для каждого элемента. Мы также добавим переход, пользуясь значением
all
. Таким образом каждое преобразование или изменение, которое мы хотим применить на каждый предмет, будет сглажено с помощью перехода – вне зависимости от того, какие CSS-свойства мы решим менять.
ol#things li a img {
position: absolute;
– webkit-transition: all 0.2s ease-in;
– moz-transition: all 0.2s ease-in;
– o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
Теперь мы готовы добавить точное позиционирование и ширину для каждой картинки, пользуясь идентификаторами, которые мы ранее назначили каждому элементу списка.
ol#things li#things-1 a img {
width: 60px;
top: 23px;
left: 26px;
}
ol#things li#things-2 a img {
width: 50px;
top: 20px;
left: 50px;
}
ol#things li#things-3 a img {
width: 80px;
top: 19px;
left: 30px;
}
ol#things li#things-4 a img {
width: 70px;
top: 25px;
left: 45px;
}
ol#things li#things-5 a img {
width: 80px;
top: 20px;
left: 34px;
}
Я
создал эти изображения большими, так что если мы хотим масштабировать их, мы можем делать это, не искажая изображения.
Теперь добавим отдельное поведение для состояния
:hover
каждого из элементов, помня о том, что общее правило сгладит и анимирует любые изменения, которые мы придумаем.
Масштабируем большой пончик
Большой пончик становится больше при наведении, так что воспользуемся преобразованием
scale
, чтобы увеличить изображение. Помните, что исходное изображение, заданное в разметке, значительно больше, чем те размеры, которые мы объявили в стилевом файле. Это было сделано намеренно, чтобы изображение можно было увеличить:
ol#things li#things-1 a: hover img {
– webkit-transform: scale(1.25);
– moz-transform: scale(1.25);
– o-transform: scale(1.25);
transform: scale(1.25);
}
Эти правила увеличат пончик на 25% при наведении курсора. На рис. 4.19 показаны оба состояния – обычное и: hover; видно, что пончик становится больше.
Рис. 4.19. Большой пончик увеличивается в состоянии: hover с помощью свойства scale
Перспектива: масштабирование и позиционирование
С газонокосилкой мы сделаем две вещи:
1) увеличим ее с помощью преобразования;
2) сдвинем ее вниз и вправо.
Эти два изменения в сочетании с переходом создадут эффект приближения газонокосилки в сторону зрителя (осторожно!). Он совсем незначительный, но простой и эффективный.
Мы будем сдвигаться на 5 пикселей вниз и на 10 пикселей вправо. Также мы добавим преобразование, чтобы увеличить газонокосилку на 20%.
ol#things li#things-2 a: hover img {
top: 25px;
left: 60px;
– webkit-transform: scale(1.2);
– moz-transform: scale(1.2);
– o-transform: scale(1.2);
transform: scale(1.2);
}
На рис. 4.20 показаны обычное и активное состояния картинки. Иллюзия приближающейся газонокосилки закончена.