在我的react应用程序中,我想创建一个圆形/弯曲的文本。为此,我找到了一个名为react-curved-text
的包。但这个包不像我想要的那样工作。
问题是它弯曲了文本,但是它不与父文本对齐,并且当我尝试使用tailwindcss将动画应用到它时,它不起作用.它不能被添加一个类名到它.那么我怎样才能使用react创建循环文本?
<ReactCurvedText
width={370}
height={300}
cx={190}
cy={120}
rx={80}
ry={80}
startOffset={0}
reversed={true}
text="Sanah Shop - Sanah shop - Sanah shop - Sanah shop - "
textProps={{ style: { fontSize: 20.5, transform: "rotate(0deg)" } }}
className="rotater absolute top-0 bottom-10"
/>
tailwind.config.js
theme: {
extend: {
keyframes: {
wiggle: {
"0%, 100%": { transform: "rotate(360deg)" },
"50%": { transform: "rotate(0deg)" },
},
spinner: {
"0%": { transform: "rotate(360deg)" },
"100%": { transform: "rotate(0deg)" },
},
},
animation: {
rotater: "spinner 10s linear infinite",
wiggle: "wiggle 10s linear infinite",
},
},
},
最终结果应该是
1条答案
按热度按时间pbgvytdp1#
您需要通过
ReactCurvedText
参数的svgProps
添加className
,如下所示:你可以看看this sandbox,它是一个使用react-curved-text库的动态弯曲文本的示例。