|
Сделать красивое оформление ссылки на CSS
|
|
| Kosten | Среда, 31 Января 2018, 17:49 | Сообщение 1 |
| Красивый дизайн веб сайта учитывает каждый отдельный аспект и элемент портала, будь то большой или малый. Небольшие анимации и красиво оформленные элементы могут значительно улучшить общий пользовательский интерфейс и могут вывести весь дизайн на новый уровень. Гиперссылки или теги привязки, являются важным элементом на любом сайте, и это единственный способ отображать внутренние или внешние ссылки на ресурсе.
По умолчанию без подчеркивания 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 для анимации или изменения дизайна пользовательского интерфейса элемента привязки тега на событии зависания. Используя эти решения, вы можете легко менять цвета, увеличивать размер шрифта, переворачивать текст, создавать границу вокруг текста помещать прямоугольник или квадратные скобки вокруг якоря, наклонять текст и манипулировать подчеркиванием.
| | Страна: (RU) |
| |
| Kosten | Пятница, 27 Июля 2018, 22:07 | Сообщение 2 |
|
| Перелистывание текста при наведении - один из моих любимых анимационных эффектов. Эффект flip отлично смотрится на текстовом элементе, когда он быстро завершается. Чтобы сделать эту флип анимацию гладкой, поместите свой якорный текст в элемент span.
Например:
Отразить текст привязки
Код <a href="#"><span>Переход на zornet.Ru</span></a>
Следующий CSS код реализует эффект flip для события привязки метки привязки. Назначьте значение rotate для преобразования свойства, чтобы повернуть текст на 360 градусов, чтобы создать эффект флип.
Код a,
span {
display: inline-block;
}
span {
transition: .5s;
}
a: диапазон hover {
-webkit-transform: rotateX (360deg);
transform: rotateX (360deg);
}
Вы можете проверить демонстрацию
| | Страна: (RU) |
| |
| Kosten | Пятница, 27 Июля 2018, 22:18 | Сообщение 3 |
|
| Добавление границы вокруг текста привязки и удаление накипи текста так, чтобы оно могло поместиться внутри коробки, - еще один классный способ иметь анимацию зависания. Следующий CSS-код присоединяет событие hover к элементам привязки тегов и с помощью селектора :: before CSS, он прикрепляет поле вокруг якорного текста. Здесь :: before до селектора выставляли что,то перед содержанием каждого выбранного элемента. Это все делается, чтоб указать само содержание для следующее вставки, вам необходимо использовать свойство content.
Добавить границу вокруг текста привязки
Например:
HTML:
Код <div> <a href="#"><span>Перейти на сайт zornet.ru</span></a> </div>
CSS
Код a {
color: #391c7c;
font-weight: 500;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
display: inline-block;
text-decoration:none;
position: relative;
}
a:hover{
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
body {
font-family: Calibri;
font-size: 18px;
padding: 10px;
}
a::before {
position: absolute;
top: -1px;
left: -6px;
box-sizing: content-box;
padding: 0 5px;
width: 100%;
height: 100%;
border: 1.5px solid #1c3e7c;
content: '';
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
a:hover::before{
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
Вы можете увидеть выше код в действии: Демонстрация
Все аналогично, только меняем эффект и стили.
Наклонить текст
CSS
Код a {
display: inline-block;
transition: .3s;
text-decoration: none;
}
a:hover {
transform: rotate(15deg);
color: green;
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 27 Июля 2018, 22:30 | Сообщение 4 |
|
| Если ни один CSS не применяется к элементу элемента привязки, появится подчеркивание. Вы можете манипулировать этим поведением по умолчанию и сделать его более привлекательным, применяя эффект затухания для отображения подчеркивания. Следующий CSS-код сначала скрывает подчеркивание, устанавливая «none» в свойство «text-decoration». Он также использует селектор :: after для создания подчеркивания под текстом привязки, а затем при наведении эффекта изменяется прозрачность на 1, чтобы отобразить его на экране.
HTML:
Код <div> <a href="#"><span>Перейти на сайт zornet.ru</span></a> </div>
CSS
Код a {
position: relative;
display: inline-block;
transition: .3s;
text-decoration: none;
}
a::after {
position: absolute;
bottom: .3em;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: #0a710a;
opacity: 0;
transition: .3s;
}
a:hover::after {
bottom: 0;
opacity: 1;
color: green;
}
a:hover {
color: green;
}
Вы можете увидеть выше код в действии на Демонстраций .
Если вы хотите, чтобы подчеркивание отображалось поверх текста привязки, вам необходимо изменить селектор ::after на селектор ::before. Удалите классы CSS после селектора и используйте следующие классы CSS, чтобы поместить строку поверх текста привязки.
CSS
Код a::before {
position: absolute;
top: .3em;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: green;
opacity: 0;
transition: .3s;
}
a:hover::before {
top: 0;
opacity: 1;
}
Вы можете увидеть выше код в действии здесь.
Чтобы показывать сверху и снизу одновременно в режиме наведения, используйте следующий блок кода CSS. Этот код использует :: after и :: before селекторами для создания строки сверху и снизу текста привязки.
CSS
Код a {
position: relative;
display: inline-block;
transition: .3s;
text-decoration: none;
}
a::after,
a::before {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: green;
opacity: 0;
transition: .3s;
}
a:hover::before {
top: 0;
opacity: 1;
}
a:hover::after {
bottom: 0;
opacity: 1;
}
a:hover {
color: green;
}
Демонстрация
Эти решения понятны и понятны с небольшим знанием CSS3. Эти решения также могут быть использованы в качестве справочного материала или руководства для создания нового поведения наведения.
| | Страна: (RU) |
| |
