Эффект обводки текста с анимацией заливки при наведении на чистом CSS

17 февр. 2024 г.

2 минуты206 слов

css эффект обводки с анимацией заливки пример

Хотите добавить интересный CSS эффект на вашем сайте? Обводка текста с заливкой при наведении выглядит стильно и делается на чистом CSS, я ее использовал для ссылок в меню. Не, ну а чо? Красиво же.

Вот пример кода на SCSS, медиазапросы для адаптивности напишете сами, у меня тут миксины, короче, кто понял тот понял:

Внутрь ссылки кладем span с data-text. Данные в data-text и текстовый контент внутри span всегда должны совпадать, т.к. мы создадим с помощью псевдоэлемента текстовый контент, который будет служить заливкой при наведении.

HTML разметка ссылки с обводкой

<a href="#" class="link">
  <span data-text="Контакты">Контакты</span>
</a>

Подробно не буду расписывать каждую строчку стилей, сами разберетесь. Успехов!

CSS(SCSS) стили для текста

.link {
  display: inline-block;
  margin: 0;
  font-size: 65px;
  line-height: 1.5;
  font-weight: 900;
  color: transparent;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #101921;
  -webkit-text-fill-color: transparent;
 
  @include media-M {
    font-size: 55px;
  }
 
  @include media-S {
    font-size: 9vw;
  }
 
  @include media-XS {
    font-size: 11vw;
  }
 
  &::selection {
    background: #101921;
    color: #fff;
  }
 
  span {
    width: 100%;
    display: block;
    position: relative;
 
    &::before {
      display: block;
      width: 0;
      color: #101921;
      overflow: hidden;
      position: absolute;
      content: attr(data-text);
      transition: all 1s cubic-bezier(0.84, 0, 0.08, 0.99);
      -webkit-text-stroke-width: 0;
      -webkit-text-stroke-color: #101921;
      -webkit-text-fill-color: #101921;
    }
 
    &:hover::before {
      display: block;
      width: 100%;
    }
  }
}