• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Эффекты наведения с использованием CSS (Эффект наведения следующий за направлением курсор для ссылок)
Эффекты наведения с использованием CSS
Kosten
Дата: Среда, 2019-07-10, 04:33 | Сообщение 1
Администраторы
Сообщений:23565
Награды: 56


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

Чаще всего мы видим, что они используются для выделения текстовых ссылок или кнопок. С помощью CSS мы всегда можем создавать впечатляющие анимации. То есть вы можете четко указать, что вы хотите. Эффекты наведения — наиболее часто используемый анимационный эффект. Вы можете или сделать это простым или сделать его более интерактивным.



Вот пример:

Код
.entry h2{
    font-size:36px;
    color:#161617;
    font-weight:800;
}

.entry h2:hover{
    color:#e02424;
}

Что он делает, так это меняет цвет вашего тега h2 с черного на красный, когда кто-то наводит курсор на него. Преимущество использования: hover заключается в том, что вам не нужно снова объявлять размер шрифта или вес, если он не меняется. Это только меняет то, что вы указываете.

Переход:

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

Код
.entry h2:hover{
    color:#e02424;
    transition: all 0.3s ease;
}

Это заставляет изменение произойти в течение 0,3 секунды, вместо того, чтобы просто мгновенно перейти к красному цвету. Это делает эффект парения более приятным для глаз и менее резким.
Прикрепления: 4624431.jpg(21.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Эффекты наведения с использованием CSS (Эффект наведения следующий за направлением курсор для ссылок)
  • Страница 1 из 1
  • 1
Поиск: