Как сделать анимацию ссылки в html

Анимация ссылок при наведении

За стиль элемента при наведении на него курсора мыши отвечает свойство :hover. Например, вот как сделать, чтобы цвет ссылки менялся с зелёного на коричневый.

a < color:green; >a:hover

Сама смена цвета или других параметров, если они указаны, происходит мгновенно и чтобы сделать её плавной, к селектору a следует добавить свойство transition. В качестве значения указываем время перехода от одного цвета к другому. К примеру, здесь время перехода занимает полсекунды.

a < color:green; transition: 0.5s; >a:hover

Для ссылок таким методом допустимо менять параметры шрифта, цвет текста, фона, толщину рамки, её цвет и некоторые другие характеристики. Учтите, что не все свойства вообще можно таким способом анимировать. Если у свойства есть дискретные значения, то никакой плавности не ожидайте. Например, свойству text-decoration можно присвоить значение none или underline . Это означает, что ссылки могут находиться только в двух состояниях: с подчёркиванием и без него.

В примере 1 показано добавление линии снизу через border-bottom. Первоначально толщина линии равна нулю, поэтому она у ссылок не отображается. При наведении на ссылку курсора мыши толщина линии плавно увеличивается до трёх пикселей.

Пример 1. Использование border-bottom

Таким же образом можно изменить не только цвет текста, но и цвет фона, или одновременно и то и другое. В примере 2 при наведении курсора на ссылку происходит смена цвета фона с серого на синий.

Пример 2. Использование background

Кроме непосредственной замены значений свойств ссылки можно трансформировать через свойство transform. Сюда входят всякие искажения, вроде поворота, масштабирования, смещения и др. Вот как будет выглядеть одновременный поворот и сдвиг при наведении (пример 3).

Пример 3. Использование transform

Свойство transform не работает непосредственно для строчных элементов, которыми ссылки являются по умолчанию. Поэтому их надо превратить в блочные или строчно-блочные элементы через свойство display со значением inline-block .

Для понимания работы свойства display рекомендуем пройти курс Блочные и строчные элементы.

Использование псевдоэлементов

Псевдоэлемент создаётся при помощи ключевых слов ::before и ::after, которые слитно пишутся после имени селектора. Сам псевдоэлемент представляет собой подэлемент, который вставляется до или после содержимого самого элемента. В случае ссылок:

• a::before — подэлемент до содержимого элемента ;
• a::after — после содержимого элемента .

Сам код HTML остаётся исходным, никаких дополнительных частей к ссылкам мы не прибавляем, само формирование псевдоэлементов выполняется через CSS. Вот как их можно представить:

a::before — [Псевдоэлемент]Содержимое a::after — Содержимое[Псевдоэлемент]

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

В примере 4 показано добавление красной линии толщиной в один пиксель ниже текста ссылки через псевдоэлемент ::after .

Пример 4. Использование ::after

Давайте построчно разберём данный код CSS.

content: '';

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

position: relative + position: absolute

Эта комбинация у элемента и псевдоэлемента позволяет задавать его положение относительно краёв элемента через свойства left, top, right и bottom.

Для понимания работы свойства position рекомендуем пройти курс Позиционирование элементов.

left: 0; bottom: 0

Псевдоэлемент располагается по левому и нижнему краям элемента .

background-color: red

Цвет фона псевдоэлемента, в данном случае красный.

z-index: -1

Псевдоэлемент выводится поверх текста ссылки и своим фоном может перекрывать его. Чтобы этого не случилось, по оси Z располагаем псевдоэлемент ниже.

width: 100%

Ширина нашего псевдоэлемента. Из-за пустого содержимого подэлемент будет нулевой ширины и высоты, поэтому эти параметры следует задать явно.

height: 1px

Желаемая высота псевдоэлемента. Поскольку нам нужна линия толщиной в один пиксель, это же значение указываем в свойстве height. Если поставить 2px, то толщина линии, соответственно, будет два пикселя.

Созданную таким образом линию можно анимировать при наведении на ссылку курсора мыши, меняя нужные нам параметры. Но уже не у самого a::after , а у селектора a:hover::after .

В примере 5 при наведении на ссылку линия снизу увеличивается на всю высоту ссылки.

Пример 5. Изменение псевдоэлемента ::after при наведении

Заметьте, что здесь transition добавляется к селектору a::after , потому что именно псевдоэлемент меняет свои параметры при наведении.

Схожим образом можно делать и другие эффекты, взяв за основу пример 2 и незначительно меняя в нём некоторые свойства и значения. Вот линия толщиной три пикселя, движущаяся слева направо.

a::after < width: 0; /* Линия не видна */ height: 3px; /* Высота линии */ >a:hover::after < width: 100%; /* Линия занимает всю ширину */ >

Если у height поставить 100%, то это будет уже не линия, а фон под ссылкой.

a::after < width: 0; /* Фон не виден */ height: 100%; /* Вся высота */ >a:hover::after < width: 100%; /* Весь фон */ >

Использование градиента

Интересные эффекты при наведении получаются при использовании линейного градиента. Он делается следующим образом.

background-image: linear-gradient(to left, red, blue)

В параметрах функции linear-gradient() сперва указывается направление градиента (в данном случае to left означает влево), затем начальный и конечный цвета. Если эти цвета задать одинаковыми, то получим однотонный фон без всякого градиента.

Градиент является фоновым изображением, поэтому к нему применимы следующие стилевые свойства:

• background-repeat — повторение фона;
• background-position — точка, откуда начинается фон;
• background-size — размер фона.

Пример 6. Движение градиента слева направо

Задать разное направление движения градиента можно через комбинацию свойств background-position , которое определяет начальную позицию фона, и background-size , устанавливающее размер фона. В табл. 1 показан код CSS, его надо включить в пример 6 для получения желаемого движения градиента.

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

Схожим образом делается градиентная линия, меняющая свои параметры при наведении на элемент. В примере 7 возле ссылок отображается прямоугольник размером 10×2 пикселя. При наведении курсора мыши на ссылку прямоугольник увеличивается на всю ширину ссылки.

Пример 7. Создание линии через градиент

Итоги

• За стиль элемента при наведении на него курсора мыши отвечает псевдокласс :hover.
• Плавный переход от одного значения к другому при наведении делается с помощью свойства transition, которое устанавливает время перехода.
• :hover можно комбинировать с псевдоэлементами ::before и ::after для добавления к ссылке дополнительного декоративного оформления.
• Схожего результата можно добиться, используя фон, созданный с помощью линейного градиента. Меняя параметры фона можно добиться различных эффектов при наведении курсора на ссылку.

Автор: Влад Мержевич
Последнее изменение: 24.04.2023

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже текста появляется линия толщиной 3 пикселя и цветом #e0591e.

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню из левого нижнего угла расширяется фон цветом #ffb21d на всю область ссылки.

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже и выше текста появляются линии толщиной 2 пикселя и цветом #2ecc71.

См. также

• :focus на мобильных устройствах
• background-size
• content
• quotes
• relative и absolute
• transition
• Аккордеон меню
• Анимация кнопок при наведении
• Атрибуты ссылок
• Виды ссылок
• Всплывающая подсказка
• Добавление тени
• Использование :hover
• Масштабирование фона
• Не только текст
• Несколько фоновых картинок
• Нормальное позиционирование
• Очистка float
• Переходы
• Переходы и анимация
• Переходы с помощью :hover
• Подробнее о позиционировании
• Подсветка строк и колонок таблицы
• Псевдокласс :hover
• Псевдоклассы в CSS
• Псевдоэлемент ::after
• Псевдоэлементы
• Псевдоэлементы ::after и ::before
• Работа с типографикой
• Селекторы CSS
• Состояния кнопок
• Сочетание с псевдоклассами
• Типы ссылок
• Установка фона и градиента

Рецепты

• Как выделить цветом строку таблицы при наведении?
• Как добавить адрес к тексту ссылки?
• Как добавить всплывающую подсказку к тексту?
• Как изменить вид маркера списка?
• Как изменить стиль чисел в списке?
• Как изменить цвет маркеров в списке?
• Как изменить цвет ссылки при наведении?
• Как плавно изменить цвет ссылки?
• Как сделать нумерацию русскими буквами?
• Как сделать подчёркивание заголовка?
• Как сделать ссылку для скачивания?
• Как сделать ссылку на адрес электронной почты?
• Как сделать фоновую картинку на всю ширину?
• Как увеличить картинку при наведении?
• Как указать язык сайта по ссылке?

Как добавить анимацию при наведении на ссылки

Узнайте, как добавить анимацию при наведении на ссылки с помощью CSS, чтобы сделать ваш сайт более привлекательным и интерактивным.

Алексей Кодов
Автор статьи
2 июня 2023 в 12:03

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

CSS-селектор :hover

Для начала нам понадобится использовать CSS-селектор :hover , который позволяет применять стили к элементам при наведении курсора мыши на них. В нашем случае, мы будем применять стили к ссылкам ( элементы).

a:hover < /* стили при наведении */ >

Пример анимации

В качестве примера, давайте создадим анимацию, при которой цвет ссылки будет плавно меняться при наведении курсора. Для этого нам понадобится использовать свойство transition в сочетании с :hover .

a < color: black; transition: color 0.3s; >a:hover

В данном примере при наведении курсора на ссылку, ее цвет будет плавно изменяться с черного на красный за 0.3 секунды.

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Разнообразие анимаций

Вы можете экспериментировать с различными анимациями, изменяя свойства CSS, такие как размер текста, тень, рамки и другие. Например, давайте добавим анимацию увеличения размера текста при наведении:

a < font-size: 14px; transition: font-size 0.3s; >a:hover

Теперь при наведении курсора на ссылку, ее размер текста будет плавно увеличиваться с 14px до 18px за 0.3 секунды.

�� Важно: старайтесь не перегружать ваш сайт анимациями, используйте их с умом и в меру.

Заключение

Анимации при наведении на ссылки могут улучшить взаимодействие с пользователями и сделать ваш сайт более привлекательным. В данной статье мы рассмотрели примеры создания таких анимаций с использованием CSS-селектора :hover и свойства transition . Экспериментируйте с различными стилями и анимациями, чтобы создать уникальный дизайн для вашего сайта.

Если вы хотите углубить свои знания в веб-разработке, рекомендуем обратить внимание на нашу знакомую школу, которая предлагает качественное обучение:

Эффекты при наведении на ссылку CSS

Подборка Hover эффектов при наведении на ссылку CSS. Это пригодиться для украшения сайта, а так же чтобы выделить нужные элементы, например, подчеркивание ссылок, заголовков, выделение цветом и многое другое.

Зачеркнутая ссылка или текст при наведении другим цветом CSS

Эффект зачеркивания ссылки при наведении пригодится, когда ссылку нужно выделить в тексте, а также для меню на сайте. Такой эффект также можно применить и к тексту. Цвет зачёркивающей линии можно менять по своему усмотрению.

Пример

HTML

  
Lorem Ipsum
 
Lorem Ipsum
 

CSS

 /* Ссылка */ a.crossed-link < color: #f66d52; /* Цвет сылки */ font-weight: 400; text-transform: uppercase; text-decoration: none; font-size: 1em; position: relative; display: inline-block; >a.crossed-link:before < content: ''; position: absolute; width: 100%; height: 1px; /* Высота зачеркивающей линии */ background: #666; /* Цвет зачеркивающей линии */ top: 45%; animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >div.crossed:hover a.crossed-link:before < animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >/* Текст */ p.crossed-text < color: #ffa000; /* Цвет текста */ font-weight: 400; text-transform: uppercase; font-size: 1em; position: relative; display: inline-block; >p.crossed-text:before < content: ''; position: absolute; width: 100%; height: 1px; /* Высота зачеркивающей линии */ background: #666; /* Цвет зачеркивающей линии */ top: 45%; animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >div.crossed:hover p.crossed-text:before < animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >/* Анимация */ @keyframes in < 0% < width: 0; left: 0; right: auto; >100% < left: 0; right: auto; width: 100%; >> @keyframes out < 0% < width: 100%; left: auto; right: 0; >100% < width: 0; left: auto; right: 0; >> @keyframes show < 0% < opacity: 0; transform: translateY(-10px); >100% < opacity: 1; transform: translateY(0); >> 

Как изменить цвет ссылки при наведении CSS

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

Пример

HTML

CSS

 .change-color-link < color: #f66d52; /* Цвет ссылки */ font-size: 2em; font-weight: bold; padding: 20px 0px; line-height: 1; text-decoration: none; -webkit-transition: all 1s ease; transition: all 1s ease; /* Время изменения цвета */ >.change-color-link:hover < color: #ffa000; /* Меняем цвет ссылки */ >

Подчеркивание у ссылки при наведении CSS

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

Анимация подчёркивания ссылок на чистом CSS

Одно из преимуществ создания моего личного сайта с нуля вместо использования готовой темы заключается в том, что я начинаю с настроек браузера по умолчанию и постепенно добавляю собственные расцветки. Я стараюсь удержать сайт от раздувания, но и персонализация — важное дело. Нужно найти некий компромисс между спартанскими страницами Hacker News и Craigslist с одной стороны и перегруженностью старого MySpace с другой.

Как-то мне попался сайт с причудливыми анимированными подчёркиваниями для ссылок, и я захотел реализовать эффект. Но мне важно использовать чистый CSS, потому что ради таких легкомысленных вещей негоже добавлять JavaScript, который может вызвать проблемы с производительностью или удобством интерфейса (см. угон полосы прокрутки).

Вот как сейчас выглядит эффект:

Реализация

Отрисовка линий под текстом — на удивление сложная тема. Всё зависимт от того, насколько далеко вы готовы отклониться от стандарта и о каких деталях беспокоитесь (например, проход мимо выносных элементов букв).

Я исследовал два подхода. Оба они, по сути, удаляют стандартный text-decoration и с помощью псевдоэлементов добавляют имитированную границу. Затем эта граница анимируется переходами CSS. К сожалению, у этих решений один недостаток: они нормально не работают, если ссылка охватывает более одной строки. Подчёркивание появляется только в первой строке.

В конце концов я нашёл CodePen от Shaw, лишённый этого недостатка, и изменил эффект на свой вкус.

Вот соответствующий код. Поиграться с ним можно на repl.it.

a < text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; >a:hover

Рассмотрим подробнее это решение.

Во-первых, отключаем стандартное оформление text-decoration .

Нам придётся использовать фоновое изображение, потому что оно способно покрыть несколько строк. Хотя можно взять реальную картинку, но речь идёт всего лишь о линии, поэтому используем линейный градиент, который сгенерирует нам изображение. Обычно его используют для создания градиента между двумя разными цветами, но нам нужно, чтобы подчёркивание было того же цвета, что и ссылка, поэтому используем currentColor как для начала, так и для конца градиента. currentColor указывает браузеру использовать цвет элемента из свойства color.

Используем background-position для размещения изображения в левом нижнем углу. Значение 0% соответствует горизонтальному положению, а 100% — вертикальному.

Отключаем background-repeat, чтобы предотвратить создание нескольких экземпляров изображения.

С помощью background-size указываем нулевую ширину и высоту в два пикселя. Нулевая ширина означает, что подчёркивание появится только при наведении, иначе картинка не видна.

Устанавливаем transition по размеру фона, так что любое изменение свойства займет 0.3 секунды.

При наведении на ссылку меняем ширину изображения на 100% , создавая полное подчёркивание, а transition обеспечивает анимацию.

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

• CodePen
• анимация ссылок
• подчеркивание ссылок