Анимированная подсветка текста

Модификация поможет сделать эффект подсветки для текста

Назад

Zero-блок

Инструкция для установки

Видеоинструкция

Текстовая инструкция

2. Скопируйте готовый код и вставляем в блок T123. Сам блок с кодом разместите под блоком каталога или в футере сайта.

1. Добавляете для картинки в зеро-блоке имя класса из генератора

Для этого нажмите правой кнопкой мыши на картинку и выберите:

Генератор кода

Класс текста для подсветки

Цвет хайлайтера

Насыщенность подсветки

Время анимации в секундах

Позиция появления анимации

Направление завершения анимации

Скопировать код

Код скопирован

Внешний вид вашей модификации

Вашему тексту нужен хайлайтер

Код с вашими параметрами

<style>
    :root {
        --colorOpacity: 1;
        --colorBase: #CEF267;
        --animationTime: 0.55s;
        --animStart: right;
        --animEnd: left;
    }
    .highlight_me::before {  
      transform: scaleX(0);
      transform-origin: bottom var(--animStart);
    }
    
    .highlight_me:hover::before {
      transform: scaleX(1);
      transform-origin: bottom var(--animEnd);
    }
    
    .highlight_me::before {
      content: " ";
      display: block;
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      inset: 0 0 0 0;
      background: var(--colorBase);
      opacity: var(--colorOpacity);
      z-index: -1;
      transition: transform var(--animationTime) ease;
    }
</style>

Могут быть интересны

Техническая поддержка

Заказать установку

Тебе нужна помощь
с установкой или возник вопрос по сервису?