Карина Удивительно, как простые вещи могут оживить обычную веб-страницу и сделать ее более рельефной. Я говорю о переходах CSS3, которые позволяют элементу трансформироваться и менять стиль, например, при наведении на него курсора.

Приведенные ниже девять примеров CSS3-анимации помогут сделать сайт отзывчивым и улучшить общий вид страницы с помощью красивых переходов. Вы можете скачать архив для получения дополнительной информации. Скачать архив RAR Все эффекты работают с использованием свойства transitions.

Сейчас достаточно написать CSS-стиль, который добавляет к селектору псевдокласс :hover и задает цвет фона, который будет плавно заменять исходный цвет фона при наведении курсора на блок: через 0,3 секунды. Появление рамки Интересным и ярким преобразованием является внутренняя рамка, которая плавно появляется при наведении мыши.

Отлично подойдет в качестве украшения для различных кнопок. Для достижения этого эффекта используется псевдокласс :hover и свойство box-shadow с параметром inset для установки тени внутри элемента. Кроме того, необходимо задать расширение тени (в нашем случае это 23px) и ее цвет:

.

Свинг Эта CSS-анимация является исключением, т. Вместо этого мы использовали ключевые кадры - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. В нашем случае эффект затухания - это, по сути, обычное изменение прозрачности элемента.

Анимация создается в два этапа: сначала вы устанавливаете исходное состояние прозрачности на 1, то есть полную непрозрачность, а затем устанавливаете его на 0 при наведении мыши. Чтобы блок увеличивался при наведении курсора, мы используем свойство transform, которому присваиваем значение scale 1.

Таким образом, блок увеличится на 20%, сохраняя пропорции:. Уменьшение Уменьшить элемент так же просто, как и увеличить. Если в шаге 5 нам пришлось увеличить масштаб, чтобы он был больше 1, то чтобы сделать его меньше, мы просто уменьшим масштаб, чтобы он был меньше 1, например, до 0.

Теперь при наведении курсора мыши на блок он будет пропорционально уменьшаться на 30% от своего первоначального размера. Трансформация в круг Одна из самых распространенных анимаций - это прямоугольный элемент, который при наведении курсора мыши превращается в круг.

С помощью CSS-свойства border-radius, используемого в сочетании с :hover и transition, это можно реализовать без проблем:

.

Вращение Интересным вариантом анимации является вращение элемента на определенное количество градусов. Для этого снова нужно использовать свойство transform, но уже с другим значением: rotateZ 20deg. С этими параметрами блок будет повернут на 20 градусов по часовой стрелке вокруг оси Z:. Однако эта CSS3-анимация очень оригинальна и также используется на веб-страницах.

Для достижения этого трехмерного эффекта мы воспользуемся уже знакомыми свойствами box-shadow, чтобы создать многослойную тень, и transform с translateX -7px, чтобы сдвинуть блок по горизонтали на 7 пикселей влево :.


Навигация

Comments

  1. Я конечно, прошу прощения, это мне совсем не подходит. Спасибо за помощь.


Add a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *