Возможности, которые мы изучали до сих пор, в значительной степени изменили Сеть, но никак не повлияли на ее статичность. Однако мы можем воспользоваться преимуществами комбинирования трансформаций и псевдоклассов и превратить нашу страницу в динамическое приложение.
Листинг 3.25. Реагирование на действия пользователя
#mainbox {
Display: block; width: 500px;
Margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
}
#mainbox:hover{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
В листинге 3.25 мы сохранили в исходном виде правило из листинга 3.2, описывающее поле заголовка, но добавили новое правило, применяющее эффект трансформирования через псевдокласс :hover. В результате каждый раз, когда указатель мыши будет подводиться к полю заголовка, свойство transform повернет заголовок на 5°, а когда указатель мыши выводится за пределы поля, заголовок возвращается в исходное положение. Таким образом мы создали простейшую, но довольно полезную анимацию, не применяя ничего, кроме свойств CSS.
Замените кодом из листинга 3.25 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.
Добавить комментарий