如何在 Tailwind 中设置文本渐变颜色变化的动画？

Question

我有一个 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无限之间保持平滑变化。

Answer 1

有一种简单的方法可以实现您想要的目标，具体方法如下：

1-首先进入tailwind.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>

看看这里