Как анимировать изменение цвета градиента текста в Tailwind?

У меня есть div с текстом внутри, который имеет цветовую схему градиента.

<div
      className = "bg-gradient-to-r bg-clip-text text-transparent from-indigo-500 to-purple-500"
    >
      SampleText
</div>

Я хочу анимировать его так, чтобы градиент плавно менялся между from-indigo-500 to-purple-500 и from-purple-500 to-indigo-500 бесконечно с заданной продолжительностью.

css tailwind-css

17.03.2022 04:13

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Есть простой способ добиться того, чего вы хотите, вот как:

1- Сначала перейдите к хвостовой ветер.config.js и добавьте это внутрь продлевать

 extend: {
      'animation': {
            'text':'text 5s ease infinite',
        },
        'keyframes': {
            'text': {
                '0%, 100%': {
                   'background-size':'200% 200%',
                    'background-position': 'left center'
                },
                '50%': {
                   'background-size':'200% 200%',
                    'background-position': 'right center'
                }
            },
        }
    },

2- Затем добавьте эти классы в свой div:

<div class = "text-9xl font-semibold 
            bg-gradient-to-r bg-clip-text  text-transparent 
            from-indigo-500 via-purple-500 to-indigo-500
            animate-text
            ">
      SampleText
</div>

Посмотрите ЗДЕСЬ

Это анимирует изменение цвета, однако в тексте больше нет градиента.

— 18.03.2022 07:41

о, извини, я не совсем понял, мой плохой. Я обновлю свой ответ, посмотрите сейчас.

— 18.03.2022 15:27

измените via-purple-500 на via-green-500, чтобы вы могли четко видеть анимацию

— 18.03.2022 15:33

@mismaah Я рад, что смог помочь.

— 18.03.2022 17:11

18.03.2022 00:22