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