Бешеный конкурс!
10:32
Автор: Рубрика: CSS-рецепты Комментариев нет

Плавные эффекты с css-псевдоклассом hover

Приветствую вас на своем блоге. В этой статье я хотел бы поделиться с вами несколькими эффектами, которых можно достичь при наведении на элементы. Как известно, псевдокласс hover применяет стиль к элементу тогда, когда на него наведен курсор. Более подробно о нем читайте в этой статье, а здесь я хотел бы показать плавные эффекты, которые создаются с помощью этого css псевдокласса (hover) и свойства transition.

Добавляем плавность для всех изменений стилей

В данном случае я пропишу такое свойство:

*{
transition: all 0.6s ease;
}

Теперь у любых элементов при изменении стилей это будет происходить не резко, а плавно. Ключевое слово all указывает на то, что это действует по отношению ко всем своствам, а ease — это тип перехода (изменение начинается медленно, затем ускоряется, потом опять затухает). Кроме него есть такие виды переходов:

    linear — обычный плавный переход с равномерной скоростью
    ease-in — медленно вначале, в конце реще.
    ease-in-out — похоже на ease, но чуть более интенсивно
    ease-out — быстрое начало, в конце замедление.

Показывать все эффекты не буду, в этой статье я использую ease, остальные вы теперь легко можете попробовать сами. Итак, переходим к простым эффектам, которые можно реализовать.

Увеличение блока

.grow:hover{
transform: scale(1.2, 1.2);
}

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

Уменьшение

.shrink:hover{
transform: scale(0.8, 0.8);
}

Аналогично с увеличением, также вы можете изменять размеры элементов только по одной оси, это просто для примера я записал одинаковые значения.

Скругление уголков

.radius:hover{
border-radius: 50%;
}

Вот так вот легко и изящно превращаем прямоугольник в эллипс.

Поворот

.rotate:hover{
transform: rotate(10deg);
}

Опять воспользуемся трансформациями, на этот раз, чтобы повернуть элемент. Вы можете указывать в качестве значения число от 0 до 360. Также допускаются отрицательные значения, тогда отсчет просто пойдет в другую сторону (против часовой стрелки).

Сдвиг в сторону

.translate:hover{
transform: translateX(30px);
}

Заметьте, translateX двигает элемент по горизонтали, чтобы сдвинуть по вертикали используйте Y или универсальное свойство translate(), в котором можно записать через запятую два параметра одновременно.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Рамка у блока

.shadow:hover{
box-shadow: 0 0 0 3px #333;
}

Вы воспользовались не совсем обычным способом добавления рамки. Обычно ее создают через border, но рамка с помощью теней имеет много преимуществ. Чтобы она отображалась, достаточно определить положительное значение растяжения и цвет.

Рамка внутри блока

.shadow-inset:hover{
box-shadow: inset 0 0 0 3px #333;
}

Добавив ключевое слово inset в начале тени мы превратим ее во внутреннюю. Подробнее об этом виде тени смотрите здесь, ну а эффект вы сами видите чем отличается.

Конечно, это далеко не все эффекты. Пока я описал такие, можно сказать, самые простые. Я думаю, со временем я обязательно дополню статью другими. Пишите в комментарии, если есть какие-то вопросы.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Комментариев нет