Создание эффектов наведения ссылок CSS может добавить немного изюминки на скучную веб-страницу. Если вы когда-либо оказывались в тупике, пытаясь создать эффект плавного наведения, у меня есть шесть CSS-эффектов, которые вы можете взять и использовать для своего следующего проекта.
Давайте перейдем прямо к делу!
Я знаю, что мы говорим :hover и все такое, но иногда (но, возможно, не всегда) это может быть хорошей идеей:focus, поскольку не все взаимодействия осуществляются непосредственно с помощью мыши, но, возможно, нажатием или нажатием клавиши.
Эффект наведения ссылки на скользящую подсветку
Этот эффект накладывает тень прямоугольника на встроенную ссылку, изменяя цвет текста ссылки в процессе. Мы начинаем с отступов вокруг ссылки, затем добавляем отрицательное поле с тем же значением, чтобы отступы не нарушали текстовый поток.
Мы будем использовать box-shadow вместо свойства background, поскольку оно позволяет нам переходить.
a {
box-shadow: inset 0 0 0 0 #54b3d6;
color: #54b3d6;
margin: 0 -.25rem;
padding: 0 .25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
box-shadow: inset 100px 0 0 0 #54b3d6;
color: white;
}
Эффект наведения ссылок на текст
Вот забавный вариант, в котором мы меняем текст ссылки на какой-либо другой текст при наведении курсора мыши. Наведите курсор на текст, и связанный текст выскользнет, когда появится новый текст.
Легче показать, чем рассказать.
В этом эффекте наведения ссылок происходит довольно много хитрости. Но волшебный соус использует атрибут данных для определения текста, который вставляется, и вызывает его со content свойством ::after псевдоэлемента ссылки.
Во-первых, разметка HTML:
<p>Hover <a href="#" data-replace="get a link"><span>get a link</span></a></p>
Это много встроенной разметки, но вы смотрите на тег абзаца, который содержит ссылку и интервал.
Давайте дадим ссылке несколько базовых стилей. Нам нужно придать ему относительное расположение, чтобы удерживать псевдоэлементы, которые будут расположены абсолютно, на месте, убедитесь, что они отображаются такinline-block, чтобы получить возможности оформления элементов блока, и скрыть любое переполнение, которое могут вызвать псевдоэлементы.
a {
overflow: hidden;
position: relative;
display: inline-block;
}
Псевдоэлементы ::before и ::after должны иметь некоторое абсолютное расположение, чтобы они складывались с фактической ссылкой. Мы убедимся, что они установлены на всю ширину ссылки со смещением нуля в левую позицию, настраивая их для некоторого скользящего действия.
a::before,
a::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
::after Псевдоэлемент получает содержимое из атрибута данных ссылки, который находится в разметке HTML:
a::after {content: attr(data-replace); }
Теперь мы можем transform: translate3d()::after переместить элемент псевдо-элемента вправо на 200%. Мы возвращаем его в положение вкл :hover. Пока мы этим занимаемся, мы можем придать этому нулевое смещение в top направлении. Это будет важно позже, когда мы будем использовать ::before псевдоэлемент как подчеркивание под текстом.
a::after {
content: attr(data-replace);
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
}
a:hover::after,
a:focus::after {transform: translate3d(0, 0, 0); }
Мы также перейдем к transform: scale()::before псевдоэлементу, чтобы он был скрыт по умолчанию, а затем снова увеличим его масштаб :hover. Мы сделаем его маленьким, например 2px, по высоте, и прикрепим его bottom так, чтобы он выглядел как подчеркивание в тексте, который заменяется на ::after.
a::before {
background-color: #54b3d6;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
}
a:hover::before,
a:focus::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
Остальное - все предпочтения! Мы добавим transition transform эффекты, некоторые цвета и еще много чего, чтобы получить полный эффект. Эти значения полностью зависят от вас.
Полный CSS
a { overflow: hidden; position: relative; display: inline-block; }
a::before, a::after { content: ''; position: absolute; width: 100%; left: 0; }
a::before { background-color: #54b3d6; height: 2px; bottom: 0; transform-origin: 100% 50%; transform: scaleX(0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); }
a::after { content: attr(data-replace); height: 100%; top: 0; transform-origin: 100% 50%; transform: translate3d(200%, 0, 0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); color: #54b3d6; }
a:hover::before { transform-origin: 0% 50%; transform: scaleX(1); }
a:hover::after { transform: translate3d(0, 0, 0); }
a span { display: inline-block; transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); }
a:hover span { transform: translate3d(-200%, 0, 0); }
Растущий эффект наведения ссылок на фоне
Это довольно популярный эффект, который я видел используемым во многих местах. Идея заключается в том, что вы используете ::beforeпсевдоэлемент ссылки в качестве жирного подчеркивания, которое находится немного позади фактического текста ссылки. Затем при наведении псевдо-элемент расширяется, чтобы охватить все целиком.
Хорошо, несколько базовых стилей для ссылки. Мы хотим, чтобы text-decoration, поскольку ::before будет действовать как один, тогда некоторое относительное позиционирование сохранится::before, когда мы зададим это абсолютное позиционирование.
a {
text-decoration: none;
position: relative;
}
Теперь давайте настроим ::before его, сделав его чем-то вроде 8px высокого, чтобы он выглядел как жирное подчеркивание. Мы также зададим ему абсолютное позиционирование, чтобы у нас был контроль, чтобы сделать его на всю ширину фактической ссылки, смещая ее так, чтобы она была на уровне left и находилась чуть дальше bottom, чтобы казалось, что она слегка выделяет ссылку. Можно также дать это z-index: -1, чтобы мы были уверены, что оно находится за ссылкой.
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
}
Красиво, красиво. Давайте сделаем так, чтобы при наведении курсора казалось, что ::before ссылка увеличивается. Все, что нам нужно, это изменить высоту с 3px на 100%. Обратите внимание, что я также уменьшаю bottom смещение до нуля, чтобы фон занимал больше места, когда он увеличивается.
a:hover::before {
bottom: 0;
height: 100%;
}
Теперь для небольшого перехода к этим изменениям:
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute; left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
Полный CSS
a { text-decoration: none; color: #18272F; font-weight: 700; position: relative; }
a::before { content: ''; background-color: hsla(196, 61%, 58%, .75); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; transition: all .3s ease-in-out; }
a:hover::before { bottom: 0; height: 100%; }
#html5 #css
