Привет, друзья! Я – Кирилл Мыльников, frontend-разработчик в ГК Юзтех. В этом материале мы разберем, изучим топ hover эффектов для CSS.
1. Holographic card
Безусловно, классика всегда остается актуальной. Давайте начнем с базового, но эффектного решения — карты с динамическим трансформационным эффектом. При взаимодействии с элементом, происходит плавное увеличение масштаба, появляется красочное теневое обрамление, а поверхность карты переливается голографическим градиентом. Данный эффект успешно функционирует в различных условиях:
- ::before: Создает голографический эффект, размещая градиентный фон с переменной прозрачностью и вращением. Изначально имеет 0 непрозрачности.
- holographic-card:hover: применяет эффект масштабирования
2. Liquid morph
Этот интерактивный элемент демонстрирует впечатляющий эффект трансформации, напоминающий поведение жидкости. В исходном состоянии мы видим стандартную кнопку с закругленными углами, выполненную в темно-синем цвете, где текст размещен по центру. При наведении курсора происходит изящная трансформация: элемент приобретает легкий поворот, радиус скругления углов уменьшается, а однотонная заливка сменяется многогранным коническим градиентом. Для реализации данного эффекта используются следующие CSS-возможности:
- ::before: Псевдоэлемент: создает конический градиентный фон, переходящий от голубого к темно-синему, создавая видимость жидкости, заполняющей кнопку
- .liquid-morph-element:hover: Уменьшает радиус границы
3. Explosive text effect
Данный динамический эффект имитирует впечатляющий взрывной эффект при наведении курсора на элемент интерфейса. Магия происходит благодаря умелому использованию псевдоэлементов ::before и ::after, которые формируют эффектные радиальные градиенты. При взаимодействии с элементом запускается эффектная анимация: происходит плавное масштабирование и вращение, создается реалистичное впечатление взрывающихся частиц вокруг основного элемента.
4. Text underline
Этот эффект представляет собой изящную анимацию, при которой текст визуально «оживает» при наведении курсора, получая выразительные подчеркивания как сверху, так и снизу. Реализация основана на использовании псевдоэлементов ::before и ::after, которые формируют динамичные линии подчеркивания. При наведении происходит плавное увеличение ширины подчеркиваний от 0 до 100%, сопровождаемое эффектным градиентным заполнением, что создает современный и привлекательный визуальный эффект.
5. Dropdown menu
Этот элегантный анимационный эффект реализует плавное появление выпадающего меню при взаимодействии с управляющей кнопкой. В начальном состоянии меню абсолютно незаметно благодаря нулевой непрозрачности, что обеспечивает чистый внешний вид интерфейса. При наведении курсора происходит гармоничная трансформация: через плавное изменение opacity до 1 меню постепенно проявляется, одновременно выполняя плавный сдвиг по вертикали с помощью transform: translateY(0), занимая своё окончательное положение. Такой подход создаёт интуитивно понятное и визуально приятное взаимодействие для пользователя.
6. Double-sided card
Данный эффект воплощает реалистичную 3D-анимацию перелистывания карты, которая захватывает внимание пользователя. При наведении курсора происходит грациозное вращение элемента на 180 градусов вокруг горизонтальной оси, демонстрируя альтернативную сторону содержимого. Примечательно, что обе стороны карты идентичны по своим размерам, однако отличаются визуальным оформлением фона. Особую глубину и объёмность эффекту придает свойство perspective, примененное к родительскому контейнеру, которое создает убедительную трехмерную перспективу и делает анимацию максимально естественной.
Эта анимация работает с:
- transform-style: preserve-3d: Позволяет картам сохранять свое трехмерное положение во время вращения
- transform: rotateY(180deg): Вращает карты по оси Y.
7. 4-corner image
Эта анимация создает интерактивный эффект изображения, где изображение делится на четыре квадранта при наведении. Квадранты представляют собой различные части изображения, и они расположены так, чтобы создать полную картину при сборке. При наведении на контейнер квадранты смещаются наружу, создавая эффект разделения.
Работает с:
- background-image: url(): применяет изображение к каждому квадрату
- background-position: обрезает определенные квадраты изображения
- transform: translate() перемещает квадранты наружу при наведении
8. Cursor animation
Эта демонстрация представляет собой комплексную анимационную систему с двумя ключевыми компонентами. Первый уровень взаимодействия реализован через разнообразные стили курсора CSS, которые изменяются при наведении на элементы. Параллельно с этим каждый блок интерфейса реагирует на взаимодействие пользователя с помощью впечатляющего набора визуальных трансформаций: плавного масштабирования, динамичного вращения, эффектной обрезки и притягательной пульсации. Давайте детально рассмотрим механизмы, которые обеспечивают работу этих впечатляющих эффектов:
- keyframes pulse: Создает пульсирующий эффект, при котором коробка многократно увеличивается и уменьшается в размерах
- keyframes shake: Имитирует дрожание или нервное движение.
- keyframes moveAround: заставляет коробку слегка смещаться в разных направлениях
- CSS-преобразования: transform: scale(), rotate(), skew(), translateY()
9. Rotating cube
Эта впечатляющая 3D-визуализация представляет собой интерактивный куб, состоящий из шести граней: передней, задней, правой, левой, верхней и нижней. Каждая грань куба оформлена в уникальных цветовых решениях с применением мягких градиентных переходов, что придает объекту особую эстетику. При взаимодействии с кубом он демонстрирует плавное вращение в трехмерном пространстве, а специальные градиентные эффекты на гранях создают реалистичное стекловидное покрытие, усиливающее визуальный эффект глубины и объема.
10. Chameleon SVG
При взаимодействии с картой активируется динамическая анимация, в ходе которой происходит плавное циклическое переключение между разнообразными SVG-узорами. Каждый узор гармонично трансформируется в следующий, создавая эффект непрерывного движения. Дополнительно усиливается визуальный эффект благодаря плавному смещению фонового рисунка по всей поверхности карты, что придает интерактивности и динамичности пользовательскому опыту.
- background-image: Использует встроенные данные SVG для отображения пользовательских шаблонов
- keyframes move-and-color: Определяет этапы анимации, указывая изменения
11. Profile card hover
Интерактивная анимация карточки профиля Codev Land реализует эффект многослойного раскрытия. При наведении курсора происходит плавное поднятие верхнего слоя с иконкой, что открывает расположенный под ним текстовый блок. Данный анимационный эффект построен на принципах параллакса и многослойной компоновки элементов, создавая иммерсивное восприятие контента и усиливая пользовательское взаимодействие с интерфейсом.
- transform: translateY(): Перемещает каждый слайд по вертикальной оси при наведении
- transition: Создает эффект анимации, когда положение обоих слайдов меняется при наведении.
12. CSS hard hover effects
Интерактивная анимация CSS hard hover, разработанная Bruno Rocha, представляет собой инновационный эффект наведения на карточку с многослойной структурой. При взаимодействии с элементом происходит динамическое сжатие верхнего слоя, что открывает расположенный под ним текстовый блок.
Плавность перехода между состояниями достигается благодаря использованию свойства transition, которое обеспечивает анимацию изменений ключевых параметров: высоты элемента, радиуса скругления границ и размера шрифта. Такой подход создает выразительный визуальный эффект трансформации, усиливающий пользовательское взаимодействие с интерфейсом и придающий ему современный динамичный характер.
13. Glowing gradient glassmorphism card
Интерактивная карта Glowing gradient glassmorphism от Kodplay представляет собой современный веб-компонент с впечатляющей визуальной составляющей. Дизайн карты построен на сочетании градиентной заливки и эффекта стеклянного морфинга, что создает иллюзию прозрачности и глубины.
Ключевой особенностью является динамическое поведение элемента при наведении курсора: происходит плавная трансформация визуальных свойств с использованием анимационных эффектов. Каждая реализация карты обладает индивидуальным стилем, который включает в себя:
- ::before и ::after псевдоэлементы: Создает градиентные перекошенные фоны. При наведении эффект перекоса удаляется, а размеры корректируются
- transition: Анимирует эффекты наведения
- keyframes animate: Креативы с легким вертикальным движением, создающие динамические плавающий эффект.
14. Tourist cards
Интерактивный эффект туристических карточек, разработанный Каримом Джаухаром, представляет собой элегантное 3D-решение для визуализации достопримечательностей. Композиция состоит из трех карточек, каждая из которых содержит изображение туристической локации.
При наведении курсора на карточку активируется плавная трансформация, осуществляемая через вращение по осям X и Z. Это создает убедительный трехмерный эффект, благодаря которому изображение словно «оживает» в пространстве.
- transform: rotateX, rotateZ, translateY, и translateZ свойства создают эффект 3D вращения и позиционирования, который происходит при наведения курсора
- transition: Сглаживает переход между состояниями, особенно на transform и box-shadow
15. Same height cards
Анимационный компонент карточек от Veronica демонстрирует продуманное решение для организации информационного контента с равномерной высотой элементов.
Интерактивность реализуется через эффект наведения, при котором происходит серия трансформаций: карточка плавно масштабируется, увеличивая видимую область контента. В расширенном состоянии становятся доступными дополнительные элементы интерфейса, такие как иконка «нравится» и временная метка.
Параллельно с увеличением происходит модификация визуального состояния фонового изображения: его прозрачность постепенно уменьшается, создавая эффект легкой затемненности. Такой комплексный подход к анимации не только улучшает пользовательский опыт, но и обеспечивает четкую визуальную иерархию представления информации, делая взаимодействие с контентом более интуитивным и приятным.
- transform: scale: Увеличивает карточку при наведения, заставляя ее «выскакивать»
16. Social media icons hover effect
Интерактивная панель социальных сетей от Эфраима Сангмы использует набор иконок Font Awesome с анимированными эффектами при наведении курсора.
17. Interactive close button
Дизайнер Мариус Нику создал инновационную кнопку закрытия с динамичной анимацией. При наведении курсора круглые элементы внутри кнопки плавно трансформируются, меняя цвет и положение, что обеспечивает интуитивно понятное взаимодействие с интерфейсом.
- transition SCSS: создает последовательный эффект перехода, который применяется ко всем свойствам.
- transform: rotate: Поворачивает полосы по диагонали
18. Icon hover effect
При наведении курсора на иконку инженера появляется круглый фон, дополняющий основной элемент.
- border-radius: 50%: Придает элементам списка круглую форму.
- transform: rotate: Поворачивает каждый элемент списка на 45
19. CSS social tiles
Stockin создал впечатляющую CSS-анимацию социальных плиток, где 3D-кнопки с названиями эффектно парят в воздухе при наведении курсора, создавая объемный визуальный эффект.
- box-shadow: Придает каждому предмету глубину и 3D-эффект
- ::before и ::after: Дополните 3D-эффект, выступая в качестве «стен» каждого элемента
20. Text and gradient icon hover effect
Yixuan разработал стильную панель навигации с интерактивными элементами: при наведении на пункты меню происходит плавное расширение, сопровождаемое градиентными переходами и яркой анимацией текста.
- ::after: Создает размытое свечение вокруг кнопки
- ::before: Создает градиентное наложение, которые постепенно появляется при наведении.
21. Creative menu hover effect
Абдель Рхман создал оригинальное меню, где с помощью Pug генерируется навигационная панель. При наведении на элементы меню срабатывает элегантный CSS-эффект, превращающий простую структуру в привлекательную интерактивную панель навигации с плавными переходами и стильной анимацией.
22. Menu hover
В эффекте наведения Larry Geams каждый пункт меню оснащен уникальной цветной левой границей. При наведении курсора на ссылку происходит плавная анимация: псевдоэлемент ::after, прикрепленный к ссылке, расширяет свою ширину до 100%, заполняя элемент красочным фоном.
23. Magic line hover
Rock Starwind разработал элегантную навигационную панель Magic line, где при наведении курсора на ссылки индикатор плавно анимируется и точно выравнивается с активным элементом, создавая динамичный и интуитивно понятный пользовательский интерфейс.
- position: absolute and button: 0: размещает линию в нижней части панели навигации.
- opacity: Устанавливают непрозрачность линии по умолчанию 0 и изменяет ее при 1 наведении курсора.
24. Wavy menu line
Мехмет Бурак Эрман создал эффектное меню с волнистыми линиями, где при наведении курсора на ссылки появляется изящная волнистая линия, привлекающая внимание пользователя к активному элементу интерфейса.
- li:hover: Предоставляет ссылкам строку SVG в кодировке base64 в качестве их background-image
- keyframes line: Анимирует положение фона по горизонтали при наведении.
25. Desktop menu animation
Анимационное меню рабочего стола от Габриэля Антонио представляет собой впечатляющую коллекцию визуальных эффектов. Разберем ключевые особенности этой инновационной разработки.
- opacity: Скрывает верхнюю и нижнюю панели меню-гамбургера при наведения курсора
- scaleY: Увеличивает размер средней панели меню-гамбургера
- nth-of-type: Создает ошеломляющие задержки для пунктов меню
26. Don’t push me button
Пакет анимаций Don’t push me от Алекса Харта объединяет два эффекта: выразительную анимацию наведения курсора и динамичную реакцию на клик, создавая интерактивный опыт для пользователя.
- transform-style: preserve-3d: Придает кнопке трехмерный вид.
- transform: translate(0m, 0.75em): Имитирует полное нажатие кнопки при щелчке, перемещая кнопку дальше вниз
27. Next button never
Кнопка «Далее» от Имрана Пардеса представляет собой стильное решение с наклонным текстом на контрастном фоне, дополненное эффектной анимацией из трёх SVG-стрелок, создающих плавный переход к следующему элементу.
- keyframes color_main: Заставляет стрелки периодически мигать желтым цветом
- box-shadow: Тень увеличивается при наведении, а ее цвет меняется на желтый
28. Sleepy birds button
Кнопка «Сонные птицы» от ash_creator демонстрирует впечатляющую анимацию на чистом CSS, где три птицы, созданные с помощью HTML и CSS, при наведении курсора оживают: две из них открывают глаза, в то время как третья продолжает спать, создавая забавный интерактивный эффект.
- keyframes sleep: Дает всем персонажам легкую анимацию дыхания/пульсации
- keyframes wakeup: Изменение высоты всех символов при наведении. Расширение символов при наведении
- letter-spacing: Увеличивает межбуквенный интервал в текстах кнопок при наведении
29. Rainbow button hover
Интерактивная радужная кнопка от Тиаго Маркеса впечатляет яркой анимацией: при наведении курсора на набор кнопок появляется плавный градиентный переход, создающий эффект движущегося радужного фона, который захватывает внимание пользователя.
30. 3D blend mode buttons
3D-кнопки от Lisi, вдохновленные работами Олега Фролова, создают эффект объемной визуализации. При наведении курсора активируется многослойная цветовая анимация, формирующая эффект покачивания и придающая кнопке реалистичное трехмерное восприятие.
- transform: Создает эффект вращения
- perspective: Придает кнопкам трехмерный вид
- min-blend-mode: Устанавливается color-dodge и заставляет цвета псевдоэлементов смешиваться, создавая поразительный цветовой эффект
31. Frame hover effect
В эффекте наведения от Temani Afif изображения изначально отображаются без рамки, но при наведении появляется обрамляющая линия, а сам снимок приобретает яркость, словно с него снимается тёмная пелена.
32. Image hover effect
В интерактивном эффекте от Ивана Гроздича реализована изящная система управления прозрачностью: при наведении курсора на любое изображение остальные плавно тускнеют до opacity: 0.1, выделяя активным opacity: 1 только выбранную картинку.
- opacity: Управляет непрозрачностью изображений при наведении.
- scale и rotate: Создает эффект масштабирования при наведении на изображения
- mix-blend-mode: difference: Применяет эффект маскировки к тексту, чтобы он адаптировался к фону
33. Gallery hover effect
В галерее Бобби Кореца реализовано элегантное взаимодействие элементов: при наведении курсора изображение масштабируется, одновременно заголовок плавно поднимается и уменьшается, формируя лаконичный и эстетичный визуальный эффект.
- transform: scale(2): Увеличивает изображение при наведении, создавая эффект масштабирования
34. Masking hover rays
В эффекте от Ana Tudor при наведении курсора создается впечатляющая динамика: с помощью градиентов и масок формируются лучи, выходящие за границы изображения, что создает визуальный эффект, напоминающий распускающиеся щупальца кальмара.
- mask: Применяет несколько радиальных и линейных градиентов, которые контролируют области
- filter: grayScale: Придает изображению эффект оттенков серого.
35. Scotch VHS
Разработанный BlurSoulx эффект домашней страницы VHS-кассеты Scotch использует пять типов анимации, которые придают продукту динамичность и ностальгическую атмосферу старой видеозаписи.
36. All but me
В эффекте страницы блога от Mojtaba Seyedi реализована интерактивная сетка карточек, где при наведении на любую из них происходит выделение элемента, а остальные карточки становятся размытыми, создавая фокус на выбранном контенте.
- filter: blur: Применяет фильтр размытия к наведенным картам, чтобы ослабить их акцент
- :not - используется для исключения наведенной карты из эффекта размытия
37. Cubes hover effect
В разработке Грега Виссинга эффект наведения превращает кубы в динамическую 3D-структуру: при наведении они вращаются и переливаются различными цветами, создавая завораживающий визуальный переход между оттенками.
- translate: Придает структуре трехмерное позиционирование
- keyframes animate: Применяет hue-rotate фильтр к .container, создавая плавный цветовой переход, который повторяется бесконечно в течение 5 секунд
38. X-ray
Эффект рентгеновского снимка от Josetxu представляет собой впечатляющую анимацию, которая при наведении курсора демонстрирует переход от обычного изображения человеческого тела к его рентгеновскому виду. Интерактивные кнопки позволяют переключаться между полным отображением тела и рентгеновским режимом. Несмотря на сложность реализации CSS-кода, анимация создает убедительный визуальный эффект медицинского сканирования.
- keyframes startup-scaner: Управляет начальным движением наложения сканера во время последовательности запуска
- keyframes startup-skeleton: Постепенно раскрывает слой скелета
При правильном использовании анимации CSS могут стать мощным инструментом для улучшения пользовательского опыта, но помните: меньше значит больше — сохраняйте баланс между эстетикой и функциональностью.
Комментарии