Разработка сайтов

Градиентный цвет текста и иконок с анимацией

Реализация красивого, переливающего фона у текста и иконок с помощью цикличной анимации

Используемые технологии: CSS, HTML

Mapbiz Group

Эффект реализован на использовании чистого CSS и HTML кода. 

На тег с текстом накладывается градиентный фон и два свойства webkit: -webkit-background-clip: text, webkit-text-fill-color: transparent. Они обрезают фон по маске контура текста, а сам текст делают прозрачным. В результате, текст становится окрашен в градиент.

Для реализации анимации сильно растягивает фон (в данном случае 400%), а затем в анимации меняется свойство положения фона.

Начнём знакомство

Отжарь конкурентов

Оставьте контакты