Как было показано в моем предыдущем сообщении в блоге, CSS - это мощный инструмент, который делает веб-сайты намного более захватывающими и визуально приятными. Вы можете стилизовать текст (в основном ссылки), но вы также можете добавить дополнительный слой стиля к текстовым и изображениям: эффекты наведения. Это означает, что когда вы наводите курсор на определенный набор текста или изображения, что-то произойдет.
Добавьте этот блог в закладки как шпаргалку, чтобы использовать ее для справки при оформлении своего следующего проекта или веб-сайта!
Изменение цвета фона
Интересный способ добавить простой эффект наведения - изменить цвет фона. Вы можете добавить :hover к соответствующему классу и добавитьbackground-color со значением цвета, и он изменится на этот цвет при наведении курсора.
a:hover {
background-color: pink;
}
Выделение текста жирным шрифтом / добавление подчеркивания
Это простейшие формы эффектов наведения: добавление подчеркивания или выделение текста жирным шрифтом. Оба модификатора находятся ниже. text-decoration добавляет подчеркивание, а font-weight делает текст жирным.
a:hover {
text-decoration: underline;
font-weight: bold;
}
Изменение шрифта / размера шрифта
Вы также можете изменить шрифт текста или ссылки при наведении курсора, добавив приведенный ниже код. Кроме того, добавление модификатора font-size позволит вам увеличивать или уменьшать размер шрифта при наведении курсора.
a:hover {
font-family: monospace;
font-size: 150%;
}
Существует так много более сложных эффектов наведения ссылки, которые используют CSS-анимацию и могут добавлять к вашему тексту и ссылкам эффекты границ / полей / вытеснения. Погуглите и поиграйте с ними, чтобы найти, какой из них вам подходит!
Эффекты наведения на изображение - забавный способ придать вашему сайту немного интересного. Ниже я покажу фрагменты кода, которые содержат имена классов объектов в CSS, которые воплощают эти эффекты в жизнь. Убедитесь, что ваши изображения / div имеют эти имена классов, если вы пытаетесь это сделать самостоятельно.
.fade
{
opacity:0.5;
}
.fade:hover
{
opacity:1;
}Это довольно простой способ, который изменяет непрозрачность изображения при наведении курсора на 100%. Например, он может сделать фотографии на странице портфолио фотографа по-настоящему живыми.
.color:hover
{
background:#53a7ea;
}Вы можете легко изменить цвет границы, div или любой другой формы на своем веб-сайте, просто установив новый цвет фона / границы в вашем CSS. Поменяйте местами значение цвета, и все готово!
.shrink:hover
{
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}Вы можете изменить размер div или изображений, используя эффект наведения выше. Вы также можете отменить эффект и заставить ваши изображения расти больше, чем их текущий размер, изменив значения шкалы (в настоящее время 0.8) выше на что-то более 1.0, например 1.3.
Hover.css
Один из моих любимых ресурсов по эффектам наведения, о котором я не рассказывал в этом блоге, - Hover.css. Это надежный ресурс, полный эффектов, которые можно применить ко многим элементам вашего веб-сайта. У них есть 2D-переходы, фоновые переходы, переходы границ, значки, переходы тени / свечения, пузыри речи и завитки. Я настоятельно рекомендую изучить этот чрезвычайно полезный ресурс, если вы хотите узнать больше!
Это вряд ли касается поверхности эффектов наведения CSS. Есть так много забавных эффектов, которые можно настроить и настроить в соответствии с вашими потребностями. Наслаждайтесь игрой с ними и добавляйте немного веселья на свой сайт!
