Красивый дизайн веб сайта учитывает каждый отдельный аспект и элемент портала, будь то большой или малый. Небольшие анимации и красиво оформленные элементы могут значительно улучшить общий пользовательский интерфейс и могут вывести весь дизайн на новый уровень. Гиперссылки или теги привязки, являются важным элементом на любом сайте, и это единственный способ отображать внутренние или внешние ссылки на ресурсе.
По умолчанию без подчеркивания CSS и синей окраски будут присутствовать метки привязки и указатель мыши указателя мыши при наведении указателя мыши. Традиционно по умолчанию был выполнен дополнительный CSS для применения разных стилей для подчеркивания или разных цветов. Теперь все не так, как сейчас, с CSS3, поскольку он предлагает гораздо больше возможностей для изучения с точки зрения новых дизайн и элементов анимации.
С небольшой помощью CSS3 эффект зависания гиперссылка может быть более красивым, интерактивным и привлекательнее Это сообщение предоставляет решения CSS3 для применения различных эффектов зависания на элементе гиперссылки.
Давай начнем!
Сгладить цвет
CSS3 имеет свойство «переход», которое позволяет плавно изменять значения свойств от одного значения к другому в течение заданной продолжительности. Он изменения свойств, а не применяет их немедленно.
Рассмотрим следующий HTML:
Код
<a id='color' href="http://zornet.ru">Изменения цвета плавно</a>
Традиционный способ изменения цвета в событии зависания:
Код
#color:hover {
color: purple;
}
Это сразу изменит цвет мыши. Но свойство перехода CSS3 делает весь этот процесс гладким. Следующий класс CSS применит переход цвета на 0,9 секунды.
Код
#color:hover {
transition: color .9s;
color: purple;
}
Аналогично, вы также можете изменить цвет фона с помощью следующего CSS:
Код
#backColor {
text-decoration: none;
padding: 0 5px;
transition: all .9s;
}
#backColor:hover {
color: #fff;
background-color: green;
}
В приведенном выше примере оба свойства фона и цвета будут переходить из-за значения, указанного для свойства перехода.
Увеличить размер шрифта
Чтобы добавить увеличивающуюся анимацию размера шрифта, вам не нужно устанавливать свойство CSS размера шрифта. Вы можете использовать свойство преобразования CSS3 для масштабирования текста до степени, что приводит к увеличению эффекта размера шрифта. Следующий CSS-код использует свойства перехода и преобразования для масштабирования:
Код
a {
display: inline-block;
transition: .3s;
font-weight:bold;
text-decoration:none;
}
a:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
Наклонить текст привязки
Наклонение якорного текста при наведении может легко привлечь внимание пользователя. Чтобы создать эффект наклона, все, что требуется, это в некоторой степени повернуть текст ссылки, используя свойство преобразования CSS3. Свойство перехода может определять длительность завершения эффекта наклона.
Чем меньше значение, тем медленнее оно будет. Следующий код CSS делает то же самое. Исходя из ваших требований, вы можете изменить значение степени, чтобы манипулировать воздействием наклона:
Код
a {
display: inline-block;
transition: .3s;
text-decoration: none;
}
a:hover {
transform: rotate(15deg);
color: green;
}
Вывод:
В заключение, это сообщение предоставляет различные решения CSS3 для анимации или изменения дизайна пользовательского интерфейса элемента привязки тега на событии зависания. Используя эти решения, вы можете легко менять цвета, увеличивать размер шрифта, переворачивать текст, создавать границу вокруг текста помещать прямоугольник или квадратные скобки вокруг якоря, наклонять текст и манипулировать подчеркиванием.
