Эффект наведения для текста в HTML + CSS
 | |
| В данном материале вы узнаете про то, как создать текста с оригинальным эффектом анимации при наведении курсора, который выполнен на чистом CSS. Он отлично смотрится на темном или светлом формате сайта, также по умолчанию здесь скорость появление эффекта задана в плавном режиме. Это простой и также очень заметный эффект анимации, где вы при наведении курсора заходите перейти, то сразу увидите на знаках анимацию, что будет заполнять буквы и цифры другим оттенком цвета. А значит есть возможность ставить под ключевые слова, что будут под ссылками на переходе, или на простой логотип. Главное здесь понятно, что он работает только при наведении клика. Как визуально смотрится, то ниже демонстрация, где все представлено в виде кнопки. Что также хочу заметить, если у тебя темный стиль дизайна, то для тебя готовая кнопка с тенями. Но на первом месте безусловно анимация, которая реально будет многих удивлять с наведением клика на данные фразы. Эффект анимации при наведении курсора с помощью чистого CSSУстановка: HTML Код <h1 data-text='ZorNet.Ru — сайт для вебмастера'>ZorNet.Ru — сайт для вебмастера</h1> CSS Код h1 { position: relative; font-size: 3em; color: #eaff3e; box-shadow: -3px -1px 7px rgb(245 239 239 / 50%); padding: 0px 28px; border-radius: 3px; cursor: pointer; transition: 1s ease-in; } h1:hover{ box-shadow:0px 2px 10px #1faddb; } h1::before{ content:attr(data-text); position:absolute; color:#169cc7; overflow: hidden; width:0%; white-space: nowrap; transition:1s ease-in; } h1:hover::before{ width:100%; } Как видите, что стилистика здесь небольшая, где анимация сделана так, что начинает заполнение текста с левой по правую сторону. Но а саму скорость и высоту зеака можно задавать в прикрепленных стилях. Также не забываем про оригинальное оформление, ведь здесь только вписан сам эффект, но и тени, что идут как кнопка, что также играют красками. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |