我试图通过移动到不同的位置来使图像动画化。但只要它超出了屏幕滚动条出现。我试着添加隐藏在父元素中的溢出，但它没有工作。下面是所需的代码片段。我用的是顺风CSS和NextJS
page.js
<main className="flex min-h-screen items-center">
<div className="container mx-auto flex">
<div className="z-50 w-1/2">
<h1 className="m-0 p-0 text-9xl">
<span>{Title.slice(0, 2)}</span>
<span className="text-secondary">{Title.slice(2)}</span>
</h1>
</div>
<div className=" w-/2">
<Image
className="absolute z-10 animate-leftToRight"
src={whiteCircle}
alt="white circle"
/>
</div>
</div>
</main>tailwind.config.js
theme: {
extend: {
colors: {
primary: "#1c2340",
secondary: "#f27eb2",
},
fontFamily: {
Josefin: ["Josefin Sans", "sans-serif"],
Poppins: ["Poppins", "sans-serif"],
},
animation: {
leftToRight: "leftToRight 10s ease-in-out infinite",
},
keyframes: {
leftToRight: {
"0%, 100%": { left: "40%", top: "-20%", rotate: "0deg" },
"50%": { left: "93%", top: "50%", rotate: "180deg" },
},
},
},
},layout.js
<html lang="en">
<body className="font-Poppins overflow-hidden max-w-[100vw] bg-primary text-white">
<Navbar />
<div className="mt-[60px]">{children}</div>
<Footer />
</body>
</html>正如您在此图像中看到的，白色圆圈位于顶部，并且没有垂直滚动
现在只要图像超出屏幕滚动出现
1条答案
按热度按时间yrefmtwq1#
您需要将
overflow-hidden添加到堆栈上下文。此时，这是html元素，因此您可以添加到globals.css：或者您可以创建一个新的堆叠上下文
relative，并添加隐藏的溢出。示例：https://play.tailwindcss.com/O8dHHydayG