next.js 如何用Tailwind制作打字动画?|下一页13.4 &顺风

qjp7pelc  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(107)

我被文本输入动画卡住了。我想把这一行的最后一个词做成动画。我已经在tailwind.config.js中添加了一些改进,但是 Flink 动画可以工作,而输入动画不行。

<h1 className='head_text text-center'>
                Discover & Share
                <br className='max-md:hidden' />
                <span className='green_gradient text-center'>
                    AI-Powered <span className='overflow-hidden whitespace-nowrap font-mono animate-typing border-r-4'>Ideas</span>
                </span>
            </h1>

字符串
tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx,mdx}',
        './components/**/*.{js,ts,jsx,tsx,mdx}',
        './app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            animation: {
                typing: 'typing 2s steps(6), blink 1s infinite',
            },
            keyframes: {
                typing: {
                    from: { width: '0' },
                    to: { width: '6ch' },
                },
                blink: {
                    from: { 'border-right-color': 'transparent' },
                    to: { 'border-right-color': 'black' },
                },
            },
            fontFamily: {
                satoshi: ['Satoshi', 'sans-serif'],
                inter: ['Inter', 'sans-serif'],
            },
            colors: {
                'primary-orange': '#FF5722',
            },
        },
    },
    plugins: [],
};

h7appiyu

h7appiyu1#

<span>元素默认有display: inlinewidth对内联元素没有影响。您可以考虑通过inline-block实用程序类在<span>上应用display: inline-block,以便width生效:

tailwind.config = {
  theme: {
    extend: {
      animation: {
        typing: 'typing 2s steps(6), blink 1s infinite',
      },
      keyframes: {
        typing: {
          from: {
            width: '0'
          },
          to: {
            width: '6ch'
          },
        },
        blink: {
          from: {
            'border-right-color': 'transparent'
          },
          to: {
            'border-right-color': 'black'
          },
        },
      },
      fontFamily: {
        satoshi: ['Satoshi', 'sans-serif'],
        inter: ['Inter', 'sans-serif'],
      },
      colors: {
        'primary-orange': '#FF5722',
      },
    },
  },
}

个字符

相关问题