Переливающийся текст на CSS

Переливающийся текст на CSS
Переливающийся текст на CSS

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

На чём же строится эффект? Всё очень просто - обычный hover-эффект и CSS свойство transition, которое управляет длительностью перехода от одного цвета к другому. Т.е. от цвета default к цвету hover.

Образец

Л о г о т и п

HTML

<div class="logo-main">
<span >i</span>
<span>N</span>
<span>i</span>
<span>k</span>
<span>S</span>
<span>i</span>
<span>t</span>
<span>e</span>
</div>

CSS

 .logo-main span {
    color: #fff;
    cursor: default;
    transition: color 1.2s;
    font-size: 7rem;
    font-weight:900;
 }
.logo-main span:hover{transition:color .002s}
.logo-main span:nth-child(1):hover, .logo-main span:nth-child(8):hover, .logo-main span:nth-child(15):hover{color:#d42735}
.logo-main span:nth-child(2):hover, .logo-main span:nth-child(9):hover, .logo-main span:nth-child(16):hover{color:#4b3039}
.logo-main span:nth-child(3):hover, .logo-main span:nth-child(10):hover{color:#6d4f9d}
.logo-main span:nth-child(4):hover, .logo-main span:nth-child(11):hover{color:#fcb248}
.logo-main span:nth-child(5):hover, .logo-main span:nth-child(12):hover{color:#fb776c}
.logo-main span:nth-child(6):hover, .logo-main span:nth-child(13):hover{color:#f58435}
.logo-main span:nth-child(7):hover, .logo-main span:nth-child(14):hover{color:#4f1d22}

CSS

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Другие статьи по теме:

Как использовать свойства CSS object-fit и object-position
Как использовать свойства CSS object-fit и object-position

Существует множество вариантов для определения размера и расположения фоновых изображений с помощью CSS. В этой статье мы рассмотрим, как использовать object-fit для размещения изображений на определенном пространстве и как использовать object-position для правильного позиционирования в этом пространстве.

CSS - Селекторы
CSS - Селекторы

Полное руководство, в котором описаны все возможные способы выбора элементов в CSS и их применения для стилизации.

Как анимировать текстовые градиенты и шаблоны в CSS
Как анимировать текстовые градиенты и шаблоны в CSS

В этой статье мы покажем, как легко анимировать фоновый градиент с помощью CSS.

CSS в 2024 году: 17 функций, меняющих современный веб-дизайн
CSS в 2024 году: 17 функций, меняющих современный веб-дизайн

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

HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров
HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...

Как добавить эффекты градиента и узоры к тексту
Как добавить эффекты градиента и узоры к тексту

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

Мы используем cookie-файлы, чтобы получить статистику, которая помогает нам обеспечивать вас лучшим контентом. Вы можете прочитать подробнее о cookie-файлах или изменить настройки браузера. Отключение cookie-файлов может привести к неполадкам в работе сайта. Продолжая пользоваться сайтом без изменения настроек, вы даете согласие на использование ваших cookie-файлов. Это совершенно безопасно!