Css плавное увеличение шрифта при наведении

Плавное увеличение текста и подчёркивание оставляет след

Пытаюсь сделать плавное подчеркивание и увеличение текста, при наведении. Однако после того, как я убираю курсор с элемента, у меня от подчеркивания остается вот такая полоса. В чем могла быть проблема?

.downloads>a < font-size: 1.3rem; text-align: center; display: block; position: relative; text-decoration: none; color: #DC352F; -webkit-transition: all .2s ease-in-out, transform .2s ease-in-out; -moz-transition: all .2s ease-in-out, transform .2s ease-in-out; -ms-transition: all .2s ease-in-out, transform .2s ease-in-out; >.downloads>a:hover < font-size: 1.5rem; >.downloads>a:after < display: block; height: 3px; background: #DC352F; position: absolute; border-radius: 2px; content: " "; left: 4px; right: 4px; opacity: 0; bottom: -6px; -webkit-transition: all .2s ease-in-out, transform .2s ease-in-out; -moz-transition: all .2s ease-in-out, transform .2s ease-in-out; -ms-transition: all .2s ease-in-out, transform .2s ease-in-out; transform-origin: bottom; transform: scaleX(0) scaleY(0); >.downloads>a:hover:after

1 ответ 1

Попробуйте добавить в .downloads>a:after

-webkit-font-smoothing: subpixel-antialiased; backface-visibility: hidden; 

.downloads>a < font-size: 1.3rem; text-align: center; display: block; position: relative; text-decoration: none; color: #DC352F; -webkit-transition: all .2s ease-in-out, transform .2s ease-in-out; -moz-transition: all .2s ease-in-out, transform .2s ease-in-out; -ms-transition: all .2s ease-in-out, transform .2s ease-in-out; >.downloads>a:hover < font-size: 1.5rem; >.downloads>a:after < display: block; height: 3px; background: #DC352F; position: absolute; border-radius: 2px; content: " "; left: 4px; right: 4px; opacity: 0; bottom: -6px; -webkit-transition: all .2s ease-in-out, transform .2s ease-in-out; -moz-transition: all .2s ease-in-out, transform .2s ease-in-out; -ms-transition: all .2s ease-in-out, transform .2s ease-in-out; transform-origin: bottom; transform: scaleX(0) scaleY(0); -webkit-font-smoothing: subpixel-antialiased; backface-visibility: hidden; >.downloads>a:hover:after

Источник

Как сделать — Увеличение при наведении

Узнать, как увеличить/масштабировать элемент при наведении с помощью CSS.

Увеличить при наведении

Наведите курсор на зеленую коробку:

Как увеличить при наведении

Пример

.zoom:hover transform: scale(1.5); /* (150% зум — Примечание: если масштаб слишком велик, он будет выходить за пределы видового экрана) */
>

Совет: Зайдите на наш учебник CSS Трансформировать чтобы узнать больше о том, как масштабировать элементы.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

Css плавное увеличение шрифта при наведении

Для того, чтобы увеличить при наведении с помощью css вам понадобится:

Для примера возьмем картинку:

Добавим этому объекту — класс — с произвольным значением — «example».

Напишем стили и «увеличим при наведении» — первое, ну, чтобы увидеть края объекта добавим border.

Вам ещё нужно псевдокласс hover.

На него повесим «transform» с. ну пусть увеличение будет 1.3:

Соберем весь код «увеличить при наведении.«.

Css:

Выведем пример кода «увеличить при наведении.«.

Не совсем то, что нам нужно. слишком дергается и увеличивается слишком быстро!

Разбираем с примером — как увеличить при наведении медленно.

Сверху я показал пример — «увеличить при наведении.«, но получилось не очень красиво, потому, что увеличение происходит слишком быстро!

Поэтому! Давайте уменьшим скорость увеличения при наведении!

Для этого вам понадобится:

Весь код возьмем из первого пункта!

И добавим туда «transition» со значением «0.5s»:

Соберем весь код «увеличить при наведении медленно.«.

Css:

Пример как увеличить при наведении медленно.

Поступаем аналогично. размещаем код «увеличения при наведении медленно» прямо здесь:

Нужно ещё медленне увеличивать при навдении:

Если это все равно слишком быстро, то увеличиваем число в «transition» — давайте поставим «2 секунды»

Источник

Эффекты при наведении на текст CSS

Подборка эффектов при наведении на текст пригодиться для украшения сайта, а так же чтобы выделить нужные элементы, например, подчеркивание текста, заголовков, выделение цветом и многое другое.

При наведении на текст меняется цвет CSS

Эффект изменения цвета при наведении необходим, когда нужно выделить определенный фрагмент текста или абзац. Этот эффект так же подойдет и для ссылки.

Пример

HTML

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

Эффект при наведении с зачеркнутым текстом подойдет для того, чтобы выделить фрагмент текста или обратить внимание пользователя на него. Цвет текста и линии одинаковый.

Пример

HTML

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

Эффект зачеркивания ссылки при наведении пригодится, когда ссылку нужно выделить в тексте, а также для меню на сайте. Такой эффект также можно применить и к тексту. Цвет зачёркивающей линии можно менять по своему усмотрению.

Пример

HTML

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

Эффект появления тени для текста подойдет для того, чтобы выделить определенный фрагмент текста на сайте, можно добавить и смену цвета текста,каак показано в примере, чтобы элементы стали более разнообразными и интересными для пользователя.

Пример

HTML

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

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

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

Изменение фона и цвета ссылки CSS

Этот эффект при наведении одинаково подойдет как для ссылки, так и для того, чтобы выделить фрагмент текста. Его можно использовать, чтобы привлечь внимание посетителей и сделать свой сайт еще более интересным.

Пример

HTML

CSS

Увеличение текста при наведении CSS

Иногда нужно увеличить текст при наведении, этого можно добиться с помощью свойства transform с функцией scale(). Свойство transition отвечает за плавное увеличение текста, с помощью него устанавливаем время масштабирования. В зависимости от того, в каком положении находится текст, его масштабирование будет происходить по разному.

Пример

HTML

 
Lorem Ipsum
 
Lorem Ipsum
 
Lorem Ipsum
 

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

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; /* Время, за которое линия расширяется при наведении */ >

Источник