所以当我在 h1 上使用成帧器运动时遇到问题
1
936import { motion } from "framer-motion";
function FirstPage() {
return (
<motion.h1
initial={{ opacity: 0, scale: 0.5, y: -100, x: -100 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.8,
delay: 0.5,
ease: [0, 0.71, 0.2, 1.01],
}}
>
Tehauto
</motion.h1>
);
}
在 css 中，我将 h1 居中，在动画中，我不更改 x 坐标 但由于某种原因它向右偏移 我不知道这是否重要，但我也安装了引导程序
带有成帧器运动（图片链接）
当我使用常规 h1（图片链接）时
我尝试删除整个标题，然后保存并再次重写，但没有成功
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我尽力解决您的所有问题！！
是否安装了bootstrap并不重要（样式也可以很好地覆盖）。
最主要的是，您需要创建
div并将其包装起来，并在h1和div中使用内联样式。 像这样你可以做到：//... <div style={{ height: '0px', width: '100px', top: '200px', color: 'white', left: '40%', position: 'relative', }} > <motion.h1 initial={{ left: -30, position: 'relative', opacity: 0, scale: 0.5, y: -100, }} style={{ fontSize: '80px', visibility: 'visible', }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.8, delay: 0.5, ease: [0, 0.71, 0.2, 1.01], }} > Tehauto </motion.h1> </div> //...以下是更新示例链接。
你可以乱搞它。
希望这会有所帮助！