注意损坏的链接、带有 Framer Motion、TailwindCSS 和 NextJs 的页面

尝试与众不同并不容易。我们已经习惯了常用的应用程序、布局和颜色，很难想到其他的东西。

无论如何，这是我对不同的 404 页面设计的看法。我使用的工具始终相同：用于页面的 React/Next.js、用于样式的 Tailwind CSS、用于使其移动的 Framer Motion。

您想跳到最后吗？您可以在我的网站上预览它并准备好完整的代码。而且，还有很多设计！希望你喜欢。

---

要事第一

我假设您知道 React/Next.js 是什么以及如何安装必要的工具和库。我将为 Next.js 撰写文章。这是一个简短的演练：

1. 安装NextJs或只是React
2. 添加TailwindCSS
3. 最后，添加Framer Motion！

让我们开始吧

在/pages目录下创建一个文件，命名为404.js。但当然，您不限于 404。您可以在此处阅读有关其他自定义错误的信息，并相应地更改页面名称及其内容。

创建页面后我们需要一个函数。
**404.js**

export default function YouDiedErrorPage() {
 return(...)
}

函数的名称并不重要，只需将其命名为您想要的任何名称即可。

正如您在封面图片中看到的，我在屏幕中央有一个文本。所以我们需要一个屏幕和一段文字！

**404.js**

export default function YouDiedErrorPage() {
  return (
    // Div as the screen
    <div className="grid h-screen w-screen place-items-center overflow-hidden bg-black text-center font-serif">
      {/* A container for the text which is centered */}
      <div className="relative whitespace-nowrap">
        {/* And a text with an id of title */}
        <h1
          id="title"
          className="absolute inset-0 flex items-center justify-center text-5xl text-red-500/40 opacity-0 will-change-transform md:text-7xl"
        >
          YOU <br className="inline-flex md:hidden" />
          DIED
        </h1>
      </div>
    </div>
  );
}

如果我们只有一个文本，那么成帧器运动有什么意义呢？你是对的！让我们拥有更多具有适当样式和响应能力的文本。

**404.js**

export default function YouDiedErrorPage() {
  return (
    // Div as the screen
    <div className="grid h-screen w-screen place-items-center overflow-hidden bg-black text-center font-serif">
      {/* A container for the text */}
      <div className="relative whitespace-nowrap">
        {/* And a text with an id of title */}
        <h1
          id="title"
          className="absolute inset-0 flex items-center justify-center text-5xl text-red-500/40 opacity-0 will-change-transform md:text-7xl"
        >
          YOU <br className="inline-flex md:hidden" />
          DIED
        </h1>
        <a
          href="#you-died-go-home"
          id="respawnText"
          className="absolute inset-0 flex items-center justify-center text-2xl text-neutral-400 opacity-0 transition-colors duration-300 hover:text-red-500 md:text-3xl"
        >
          Click here to respawn ↻
        </a>
        <p
          id="reasonOfDeath"
          className="absolute inset-0 mt-6 flex items-center justify-center text-neutral-500/80 opacity-0 md:mt-8"
        >
          - 404: Death by broken link! -
        </p>
      </div>
    </div>
  );
}

你玩过类似《黑暗之魂》的游戏吗？如果你失败或死亡，“游戏结束”（或者在我们的例子中，“你死了” ）文本淡入并放大。之后，将出现一个 “加载游戏” 或 “退出” 按钮以及一些统计数据或其他相关信息。这将是一样的！

我们将显示标题，然后带有“单击此处重生↻”文本的链接将出现，并带有“- 404：因链接损坏而死亡！-”副标题。

如您所见，我们为每个元素提供了用于制作动画的 id。为此，我们需要框架运动的 useAnimate() 钩子，您可以在此处.

阅读它

让我们制作动画

Framer Motion 的 useAnimate 钩子与异步函数允许您轻松地以任何您想要的方式对动画进行排序。您所需要的只是一个范围来告诉 Framer Motion 看向何处，以及一个动画函数来指定要执行的操作。看看下面的代码：

  const [scope, animate] = useAnimate();

  async function killThem() {
    await animate("#title", { scale: 2, opacity: 1 }, { duration: 3 });
    await animate("#title", { opacity: 0 }, { duration: 1 });
    await animate("#respawnText", { opacity: 1 }, { duration: 1 });
    await animate("#reasonOfDeath", { opacity: 1 }, { duration: 0.7 });
  }

这里的一切都非常不言自明。使用正确的名称创建一个异步函数，并通过等待每个动画创建一个序列。选择一个 id 并告诉它要做什么。简单得惊人！现在看看最终的代码，您就会明白它的作用。我还添加了一些对开发有用的附加功能。

**404.js**

import { useAnimate } from "framer-motion";
import { useEffect } from "react";

export default function YouDiedErrorPage() {
  const [scope, animate] = useAnimate();

  async function killHim() {
    await animate("#title", { scale: 2, opacity: 1 }, { duration: 3 });
    await animate("#title", { opacity: 0 }, { duration: 1 });
    await animate("#respawnText", { opacity: 1 }, { duration: 1 });
    await animate("#reasonOfDeath", { opacity: 1 }, { duration: 0.7 });
  }
  // With this we are starting the animation, you can also call the function in anywhere you like!
  useEffect(() => {
    killHim();
  }, []);

  // Function to refresh the page for development and demonstration purposes.
  function handleRespawnClick() {
    window.location.reload();
  }

  return (
    <div className="grid h-screen w-screen place-items-center overflow-hidden bg-black text-center font-serif">
      <div ref={scope} className="relative whitespace-nowrap">
        <h1
          id="title"
          className="absolute inset-0 flex items-center justify-center text-5xl text-red-500/40 opacity-0 will-change-transform md:text-7xl"
        >
          YOU <br className="inline-flex md:hidden" />
          DIED
        </h1>
        <a
          onClick={handleRespawnClick} // For development, remove later.
          href="#you-died-go-home"
          id="respawnText"
          className="absolute inset-0 flex items-center justify-center text-2xl text-neutral-400 opacity-0 transition-colors duration-300 hover:text-red-500 md:text-3xl"
        >
          Click here to respawn ↻
        </a>
        <p
          id="reasonOfDeath"
          className="absolute inset-0 mt-6 flex items-center justify-center text-neutral-500/80 opacity-0 md:mt-8"
        >
          - 404: Death by broken link! -
        </p>
      </div>
    </div>
  );
}

这里我在容器 div 中有范围/引用。使用容器 div 来放置动画总是比整个屏幕更好。请记住将锚链接更改为您想要的任何位置，如果您使用 NextJs，请不要忘记将其更改为下一个/链接:)

目前，就这些了。只是一个概念，提供了一种使用成帧器运动制作动画的简单好方法。 在这里预览，享受美好的一天！

以上是注意损坏的链接、带有 Framer Motion、TailwindCSS 和 NextJs 的页面的详细内容。更多信息请关注PHP中文网其他相关文章！