我被文本输入动画卡住了。我想把这一行的最后一个词做成动画。我已经在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: [],
};
型
1条答案
按热度按时间h7appiyu1#
<span>
元素默认有display: inline
,width
对内联元素没有影响。您可以考虑通过inline-block
实用程序类在<span>
上应用display: inline-block
,以便width
生效:个字符