Плавные эффекты с 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(), в котором можно записать через запятую два параметра одновременно.

Рамка у блока

.shadow:hover{
	box-shadow: 0 0 0 3px #333;
}
Вы воспользовались не совсем обычным способом добавления рамки. Обычно ее создают через border, но рамка с помощью теней имеет много преимуществ. Чтобы она отображалась, достаточно определить положительное значение растяжения и цвет.

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

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

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

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: