Подборка эффектов при наведении на текст пригодиться для украшения сайта, а так же чтобы выделить нужные элементы, например, подчеркивание текста, заголовков, выделение цветом и многое другое.
При наведении на текст меняется цвет CSS
Эффект изменения цвета при наведении необходим, когда нужно выделить определенный фрагмент текста или абзац. Этот эффект так же подойдет и для ссылки.
Пример
Lorem Ipsum
HTML
<p class="change-text">Lorem Ipsum</p>
CSS
p.change-text{
color: #f66d52; /* Цвет текста */
font-size: 2em; /* Размер текста */
font-weight: bold;
padding: 20px 0px;
text-transform: uppercase;
line-height: 1;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
p.change-text:hover{
color: #5265f6; /* Меняем цвет текста */
}
Зачеркнутый текст CSS
Эффект при наведении с зачеркнутым текстом подойдет для того, чтобы выделить фрагмент текста или обратить внимание пользователя на него. Цвет текста и линии одинаковый.
Пример
Lorem Ipsum
HTML
<p class="line-through">Lorem Ipsum</p>
CSS
p.line-through{
color: #f66d52; /* Цвет текста */
font-weight: 400;
text-transform: uppercase;
font-size: 1em;
text-decoration:none;
}
p.line-through:hover{
text-decoration:line-through; /* Добавляем зачеркивание */
}
Зачеркнутая ссылка или текст при наведении другим цветом CSS
Эффект зачеркивания ссылки при наведении пригодится, когда ссылку нужно выделить в тексте, а также для меню на сайте. Такой эффект также можно применить и к тексту. Цвет зачёркивающей линии можно менять по своему усмотрению.
Пример
Lorem Ipsum
HTML
<!-- Ссылка -->
<div class="crossed"><a href="#" class="crossed-link" title="">Lorem Ipsum</a></div>
<!-- Текст -->
<div class="crossed"><p class="crossed-text">Lorem Ipsum</p></div>
CSS
/* Ссылка */
a.crossed-link {
color: #f66d52; /* Цвет сылки */
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
font-size: 1em;
position: relative;
display: inline-block;
}
a.crossed-link:before {
content: '';
position: absolute;
width: 100%;
height: 1px; /* Высота зачеркивающей линии */
background: #666; /* Цвет зачеркивающей линии */
top: 45%;
animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover a.crossed-link:before {
animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
/* Текст */
p.crossed-text{
color: #ffa000; /* Цвет текста */
font-weight: 400;
text-transform: uppercase;
font-size: 1em;
position: relative;
display: inline-block;
}
p.crossed-text:before {
content: '';
position: absolute;
width: 100%;
height: 1px; /* Высота зачеркивающей линии */
background: #666; /* Цвет зачеркивающей линии */
top: 45%;
animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover p.crossed-text:before {
animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
/* Анимация */
@keyframes in {
0% {
width: 0;
left: 0;
right: auto;
}
100% {
left: 0;
right: auto;
width: 100%;
}
}
@keyframes out {
0% {
width: 100%;
left: auto;
right: 0;
}
100% {
width: 0;
left: auto;
right: 0;
}
}
@keyframes show {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
Появление тени для текста при наведении CSS
Эффект появления тени для текста подойдет для того, чтобы выделить определенный фрагмент текста на сайте, можно добавить и смену цвета текста,каак показано в примере, чтобы элементы стали более разнообразными и интересными для пользователя.
Пример
Lorem Ipsum
HTML
<p class="shadow-text">Lorem Ipsum</p>
CSS
.shadow-text{
color: #f66d52; /* Цвет текста */
font-size: 2em; /* Размер текста */
font-weight: bold;
padding: 20px 0px;
text-transform: uppercase;
line-height: 1;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.shadow-text:hover{
color: #ffa000; /* Меняем цвет текста */
-webkit-text-shadow: 2px 2px 2px #000;
-moz-text-shadow: 2px 2px 2px #000;
text-shadow: 2px 2px 2px #000;
}
Анимация с подчёркивающей и исчезающей линией у ссылки CSS
Этот эффект при наведении подойдет как для ссылки, так и для заголовка и текста, если это необходимо. С помощью такого эффекта можно выделить ключевые моменты и сделать сайт интереснее.
Пример
HTML
<a href="#" class="underline-one">Lorem Ipsum</a>
CSS
.underline-one {
color: #00bfff; /* Цвет обычной ссылки */
position: relative;
cursor: pointer;
text-decoration: none; /* Убираем подчеркивание */
}
.underline-one:after {
content: "";
display: block;
position: absolute;
right: 0;
bottom: -3px;
width: 0;
height: 2px; /* Высота линии */
background-color: black; /* Цвет подчеркивания при исчезании линии*/
transition: width 0.5s; /* Время эффекта */
}
.underline-one:hover:after {
content: "";
width: 100%;
display: block;
position: absolute;
left: 0;
bottom: -3px;
height: 2px; /* Высота линии */
background-color: red; /* Цвет подчеркивания при появлении линии*/
transition: width 0.5s; /* Время эффекта */
}
Анимация с подчёркивающей линией у ссылки CSS
Анимация с подчёркивающей линией у ссылки CSS подойдет как для ссылок, так и для заголовков и текста. Необходимо будет обернуть ссылку в дополнительный див, чтобы задать ему нужные свойства.
Пример
HTML
<div class="link-ease-in-out">
<a href="#" title="Lorem Ipsum">Lorem Ipsum</a>
</div>
CSS
.link-ease-in-out a {
display: inline-block;
color: #00bfff; /* Цвет обычной ссылки */
line-height: 1;
text-decoration: none; /* Убираем подчеркивание */
cursor: pointer;
}
.link-ease-in-out a:after {
background-color: #f66d52; /* Цвет линии при наведении на нее курсора мыши */
display: block;
content: "";
height: 2px; /* Высота линии */
width: 0%;
-webkit-transition: width .3s ease-in-out;
-moz--transition: width .3s ease-in-out;
transition: width .3s ease-in-out;
}
.link-ease-in-out a:hover:after,
.link-ease-in-out a:focus:after {
width: 100%;
}
Изменение фона и цвета ссылки CSS
Этот эффект при наведении одинаково подойдет как для ссылки, так и для того, чтобы выделить фрагмент текста. Его можно использовать, чтобы привлечь внимание посетителей и сделать свой сайт еще более интересным.
Пример
Lorem Ipsum
HTML
<p>Lorem Ipsum</p>
CSS
p {
color: #5a5a5a; /* Цвет текста */
background: #ffc; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
transition: 1s linear; /* Время изменения */
}
p:hover {
color: #fff; /* Цвет текста */
background: #f66d52; /* Цвет фона */
}
Увеличение текста при наведении CSS
Иногда нужно увеличить текст при наведении, этого можно добиться с помощью свойства transform с функцией scale(). Свойство transition отвечает за плавное увеличение текста, с помощью него устанавливаем время масштабирования. В зависимости от того, в каком положении находится текст, его масштабирование будет происходить по разному.
Пример
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
HTML
<p class="gain-left">Lorem Ipsum</p>
<p class="gain-center">Lorem Ipsum</p>
<p class="gain-right">Lorem Ipsum</p>
CSS
/* Текст слева */
.gain-left {
transition: 1s; /* Время эффекта */
text-align: left;
}
.gain-left:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст по центру */
.gain-center{
transition: 1s; /* Время эффекта */
text-align: center;
}
.gain-center:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст справа */
.gain-right {
transition: 1s; /* Время эффекта */
text-align: right;
}
.gain-right:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
Как добавить линию к заголовку с помощью :before и :after
Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.
Пример
Lorem Ipsum
HTML
<h3 class="title-example">Lorem Ipsum</h3>
CSS
h3.title-example{
font-size: 1em; /* Размер шрифта */
color: #5a5a5a; /* Цвет заголовка */
text-align: center; /* Текст по центру */
}
/* CSS код для линии над заголовком */
h3.title-example:before {
content: '';
display: block;
height: 1px; /* Высота линии */
background: #f66d52; /* Цвет линии */
width: 150px; /* Ширина линии до наведения */
margin: 0 auto 10px; /* Отступ с боков по центру и снизу */
transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:before {
width: 250px; /* Ширина линии при наведении */
transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}
/* CSS код для линии под заголовком */
h3.title-example:after {
content: '';
display: block;
height: 1px; /* Высота линии */
background: #f66d52; /* Цвет линии */
width: 150px; /* Ширина линии до наведения */
margin: 10px auto 0; /* Отступ с боков по центру и сверху */
transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:after {
width: 250px; /* Ширина линии при наведении */
transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}