Применение различных hover эффектов CSS при наведении курсора на изображение, ссылку или текст является одним из наиболее распространенных методов CSS .
В этой статье я собрал много интересных эффектов CSS3 , проявляющихся при наведении курсора мыши. Вы можете легко применить их на своем сайте или других веб-проектах. Давайте посмотрим, что я для вас приготовил.
1. 10 Stylish Hover Effects
Как следует из названия, это коллекция из 10 невероятно стильных эффектов наведения.
2. Direction-aware Hover Effect
Когда вы наводите указатель мыши на различные элементы, CSS hover эффект при наведении следует за курсором и создает удивительные 3D презентации.
3. Wacom Hover Effect
Это уже довольно избитый эффект, но многие люди все равно с удовольствием его используют. Презентация является простой, но привлекательной.
4. CSS3 Hover Effects
Если вы ищете круговые эффекты наведения, здесь вы найдете несколько интересных. В общей сложности доступно 12 различных CSS hover эффектов рамки.
5. Hover Animation from UNIQLO
Это еще один интересный эффект наведения. Он идеально подойдет для миниатюр или других типов изображений.
6. Button Hover Effects
А вот несколько впечатляющих эффектов наведения для кнопок. Все они прекрасно подойдут для сайтов любого типа.
7. 10 Stunning Hover Effects
Еще один набор из 10 hover эффектов CSS для кнопок. Большинство из них довольно впечатляющие.
8. CSS3 Hover Effects 2
Это коллекция, состоящая из четырех различных эффектов наведения на изображение. Вместе с эффектом отображаются его название и описание.
9. Bounce on Hover
Это забавный и интересный эффект наведения для изображений. Круглая рамка идеально подходит для применения к аватаркам участников команды, изображений рекомендаций.
10. 8-bit Hovers
Этот стильный винтажный hover эффект CSS вызовет в вас чувство ностальгии. Вы можете использовать его, чтобы создать ретро стиль для сайта.
11. Simple Title Hover Effect
При наведении курсора мыши на изображение этот эффект выводит заголовки на фоне с низкой непрозрачностью.
12. Flip Down Effect
Это еще один простой, но очень красивый CSS hover эффект при наведении. При наведении курсора мыши на изображение он выводит название и описание с помощью смарт-эффекта перелистывания.
13. Curiosity Award
Пока вы не наведете курсор мыши на изображение, вы не поймете красоту этого эффекта. Случайные линии красиво превращаются в логотип, а затем он раскрашивается цветами.
14. Image Hover Effect
Это невероятный CSS hover эффект рамки для изображений. Способ, с помощью которого одно изображение проявляется на фоне другого, невероятен!
15. Hover Animation
При наведении курсора на изображение применяется уменьшение непрозрачности с фокусировкой на ссылке.
16. Hover Me Brother
Возможно, это и не очень полезный hover эффект CSS , но забавный. Просто наведите курсор мыши на солнцезащитные очки, и начнется магия.
17. Nautilus SCSS HAML Hover Effects
Это креативный эффект наведения, доступный в нескольких вариациях. В них предлагаются уникальные возможности для оформления изображений.
18. SVG Border Hover Effect 1
Подойдет для текста, кнопок или изображений. Постепенное воссоздание рамки — это действительно интересный эффект.
19. Hover Search Map Icon
Вам нужен CSS hover эффект при наведении для панели поиска или иконки карты? Это именно он. Его бесшовные преобразования — сплошное удовольствие для глаз.
20. Social Icon Pane
Этот эффект наведения можно применить, чтобы в начале скрыть иконки социальных медиа, а затем вывести их, когда пользователь наводит на них курсор мыши.
21. Product Item Additions Info
Это отличный способ предоставления дополнительной информации о товарах в интернет-магазине. При наведении курсора на изображение продукта с помощью красивого эффекта отображается информация о нем.
22. Animated Envelope
Идеальный CSS hover эффект при наведении для раздела « Связаться с нами «. Он отображает контактную информацию в раскрывающемся конверте, но только после того, как пользователь наведет курсор мыши на изображение.
23. Back to Top
Этот уникальный эффект наведения для кнопки « Вверх » позволяет предоставить посетителям красивый, анимированный указатель.
24. Fancy Hover
При наведении курсора мыши на изображение, оно не только увеличивается, но и изменяется способ его отображения.
25. Reminders Icon Hover Effect
Этот hover эффект CSS добавляет к изображению красивые стили.
26. Circle Image Hover
Эффект наведения для круговых изображений. В коллекции присутствует четыре различных стиля эффектов наведения.
27. Safari Icon Hover Effect
Этот CSS hover эффект при наведении воссоздает анимацию иконок Safari . Вы можете заменить значок собственным изображением или логотипом.
28. Simple Button Hover
Это простой эффект наведения, который может быть применен и к кнопкам, и к изображениям. Легкая подсветка увеличит привлекательность изображений.
29. 3D Photo Effect Fold
Если вы запускаете сайт обмена фотографиями или каталог изображений, этот эффект окажется для вас незаменимым. При наведении курсора мыши на изображение оно сгибается забавным образом и пользователю выводятся панель операций с изображением.
30. 3D Thumb Image Hover Effect
Это поистине уникальный CSS hover эффект рамки. При наведении курсора мыши он « кладет изображение на землю «.
31. Background Change CSS
Этот эффект изменяет фон при наведении курсора мыши на кнопку. Немного поэкспериментировав, можно легко реализовать его на своем сайте.
32. Direction Aware Hover
Это еще один CSS hover эффект при наведении, выделяющий путь перемещения курсора мыши. При наведении указателя он добавляет затемнение на изображения. И это затемнение следует за курсором.
33. SVG Hover Animation
Эти красивые эффекты наведения выглядят очень интересно. Анимация и масштабируемость SVG-изображений делают их идеальными для любого типа сайтов.
Заключение
Что вы думаете об описанных мною hover эффектах CSS ? Какие из них понравились вам больше всего? Напишите об этом в комментариях.
Данная публикация представляет собой перевод статьи « 30+ CSS3 Hover Effects You should be Familiar With » , подготовленной дружной командой проекта Интернет-технологии.ру
Данный эффект хорошо подходит при наведении на ссылки в навигационных меню или в пагинациях. Ссылки помещены в рамки определенного цвета, при наведении на которые, рамки меняют цвет и слегка перемещаются. Смотрится такой эффект очень оригинально.
HTML-разметка
У нас меню будет горизонтальное, поэтому создаем четыре ссылки внутри тега nav. Для того, чтобы создать необходимые отступы, оборачиваем меню навигации в div с классом container. Вот и все, HTML разметка создана.
Пишем CSS код
Вся магия и будет происходить именно здесь, в процессе стилизации тегов и классов. Сделаем текст ссылок более привлекательным, за счет подключения шрифта Lato.
Для всех псевдоэлементов указываем размер бокса box-sizing. Это нужно для того, чтобы внутренние отступы и рамка не влияли на ширину элемента.
Стилизация класса container
Зададим отступы со всех сторон от края браузера.
Содержимое контейнера (меню навигации) выравниваем по центру.
Пропишем название шрифта, второй шрифт запасной.
font-family: ‘Lato’, sans-serif;
Зададим цвет фона.
Устанавливаем relative для позиционирования его дочерних элементов относительно его самого.
Переводим ссылки из строчных элементов в строчно-блочные, чтобы иметь возможность применить к ним свойства, предназначенные только для блочных элементов.
Задаем поля и отступы.
margin: 14px 24px;
padding: 9px 19px;
Остальные свойства тега nav достаточно простые и интуитивно понятные, отвечающие за внешний вид ссылок.
Заготовка из ссылок создана, можно приступать к реализации эффекта при наведении на ссылку. Мы не просто так к тегу nav приписали класс .link-up, сделали мы это специально для псевдоэлементов before и after, которые будут применяться к тегу ссылки a. Да и сам эффект построен исключительно на свойствах, применяемых к псевдоэлементам.
Псевдоэлементы after и before
Синяя рамка вокруг ссылок на самом деле не настоящая, а псевдоэлемент before. Давайте разберём, какие свойства были использованы.
Синяя рамка строго привязана к ссылке, она как-бы накладывается на текст ссылки сверху.
Пустой content обязательный атрибут, без него рамки не будет видно. Визуализация рамки:
border: 2px solid #364856;
content: ‘ ‘;
Плавный переход при наведении на ссылку обеспечивает свойство.
transition: transform 0.4s, opacity 0.4s;
Рисуем белую рамку — after
Синяя рамка готова, теперь рисуем белую рамку, сдвигаем её на несколько пикселей по X и Y осям. Таким образом, чтобы белая рамка не повторяла контуры синей рамки и прячем её, делаем прозрачной. Ведь она должна появиться только при наведении на ссылку.
.link-up a::after <
transform: translateY(-8px) translateX(7px);
opacity: 0;
border-color: #ffffff;
>
Наведение на рамку – hover effect
При наведении синяя рамка исчезает.
.link-up a:hover::before,
.link-up a:focus::before <
transform: translateY(4px) translateX(-4px);
opacity: 0;
>
А белая рамка появляется и делает движение вниз.
.link-up a:hover::after,
.link-up a:focus::after <
opacity: 1;
transform: translateY(0px) translateX(0px);
>
Посмотреть результат и код эффекта при наведении целиком:
Для новичков, было бы хорошо пройти мой видеокурс.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.
Дата публикации: 2018-10-10
От автора: дизайнер, с которым я работаю, представил на недавнем собрании команды свой проект. Она проделала замечательную работу, объединив концепцию системы дизайна, компоненты, шаблонов и все, что между ними, и это сделало бы любого стороннего разработчика счастливым.
Но в ее работе был, на мой взгляд, крошечный нюанс: эффекты при наведении на ссылку были странными.
Ссылка по умолчанию (сверху) и эффект наведения (внизу)
Ха! Я не только не видел такого раньше, эта идея никогда не приходила мне в голову. Оказывается, есть много примеров этого на реальных сайтах, один из которых — The Outline. Именно эта идея вдохновила дизайнера.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Круто, подумал я. Мы можем сделать что-то вроде линейного фонового градиента или даже фонового изображения. Но! Это не все. Оказывается, этот эффект анимирован. Опять же, на The Outline:
Снимок экрана из статьи The Outline
Вау! Это довольно дико. Я не был уверен, как подойти к этому, честно говоря, потому что анимация для любой из моих первоначальных идей будет сложной, особенно по части кросс-браузерной поддержки.
Итак, как это сделали The Outline? Оказывается, это SVG. Мы можем сделать крутой контур и анимировать его довольно просто:
Но как это работает со ссылкой? Ну, мы можем использовать SVG для свойства background-image:
Но это немного не то, потому что мы не можем его анимировать. Для этого нам нужны лучшие решения. Тем не менее, мы можем встроить CSS непосредственно в SVG, в свойство background-image. Мы не можем просто скопировать и вставить SVG-код в свойство, но с помощью определенного кода это возможно:
И поскольку SVG может содержать собственные стили в разметке, анимация может быть передана прямо в свойство background-image, так же, как мы делаем это с помощью CSS в заголовке HTML-документа или встроенного CSS в HTML.
Мы можем немного изменить стили:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Это вдохновляет!
Я понятия не имею, хорошо ли влияет такая яркая анимация на опыт пользователя, и, честно говоря, не в этом суть этого поста. Дело в том, что у The Outline появилась забавная идея с реализацией CSS.
Это заставило меня задуматься о других нестандартных (возможно, даже нетрадиционных) стилях наведения, которые мы можем создать. Опять же, не рассматривая юзабилити. а только проводя захватывающие эксперименты с CSS…
Эффекты границы, переходящей в фон
Возможно, та же самая нижняя граница ссылки по умолчанию может растягиваться и становиться фоном ссылки при наведении:
Черт, мы можем сделать что-то подобное горизонтально:
Эффект обведенного текста
Давайте уберем цвет шрифта и оставим только контур.
Эффект увеличивающегося текста
Другая идея — увеличить текст при наведении:
Эффект изменяющегося шрифта
Это так непрактично, что это заставляет меня улыбнуться, так почему бы нет:
Эффект «Появись, Крис»
Прости, Крис. Я думаю, тебе это понравится.
Что вы еще можете придумать?
Есть идеи? Дайте мне знать в комментариях, и я отправлю их в коллекцию CodePen, которую я начал.
Автор: Geoff Graham
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
