使用 React Tailwind CSS 的动态头部图像框

需要快速提升 UI 效果吗？ ？这是一个简单的 React Tailwind CSS 片段，用于创建时尚的 Head-Out 图像框。

代码

// HeadOutImage.tsx
interface IProps {
  alt: string;
  src: string;
}

export default function HeadOutImage({ alt, src }: IProps) {
  return (
    <div className="group aspect-[7/9] h-auto w-full flex-[0_0_auto] self-start overflow-hidden border-b-2 border-white pt-20">
      <div className="size-full border-2 border-b-0 border-white bg-red-400/0 transition-colors duration-500 group-hover:bg-red-400/85" />
      <Image
        alt={alt}
        src={src}
        className="absolute -bottom-24 h-auto w-full border-2 border-transparent transition-all duration-500 ease-in-out group-hover:-bottom-20"
      />
    </div>
  );
}

使用组类和修饰符，我们可以实现上面很酷的效果。复制、粘贴，完成！ ?️✨ 您还可以调整位移并以您喜欢的方式自定义它！

以上是使用 React Tailwind CSS 的动态头部图像框的详细内容。更多信息请关注PHP中文网其他相关文章！