Как создать эффект многострочной заливки с подчеркиванием в CSS.
Вы можете создавать интересные эффекты, анимируя свойство background-position
и устанавливая размер фона как кратное элементу, к которому он применяется (например, 200%).
Одним из примеров является создание начального элемента подчеркивания и затем его «заливка» новым цветом.
В CSS вам необходимо:
- Установите линейный градиент с помощью свойства
background-image
. - Установите размер фона с шириной 200% и высотой, равной желаемой высоте подчеркивания.
- Установите
background-repeat
равнымno-repeat
, иначе невозможно было бы «ограничить» высоту фона. - Анимируйте свойство
background-position
.
CSS:
.anim-underline-fx {
background-image: linear-gradient(to right, darkblue 50%, lightsteelblue 50%);
background-size: 200% 3px;
background-repeat: no-repeat;
background-position: 100% 100%;
transition: background-position .3s;
}
.anim-underline-fx:hover {
background-position: 0% 100%;
}
Что хорошего в этом эффекте, так это то, что он работает с несколькими строками текста. 👌
Демо
Вот живая демонстрация: