尝试与众不同并不容易。我们已经习惯了常用的应用程序、布局和颜色，很难想到其他的东西。
无论如何，这是我对不同的 404 页面设计的看法。我使用的工具始终相同：用于页面的 react/next.js、用于样式的 tailwind css、用于使其移动的 framer motion。
您想跳到最后吗？您可以在我的网站上预览，并准备好完整的代码。而且，还有很多设计！希望你喜欢。
要事第一
我假设您知道 react/next.js 是什么以及如何安装必要的工具和库。我将为 next.js 撰写文章。这是一个简短的演练：
立即学习“前端免费学习笔记（深入）”；
安装nextjs或只是react添加tailwindcss最后，添加 framer motion！
让我们开始
在/pages目录下创建一个文件，命名为404.js。但当然，您不限于 404。您可以在此处阅读有关其他自定义错误的信息，并相应地更改页面名称及其内容。
创建页面后我们需要一个函数。
**404.js**
export default function youdiederrorpage() { return(...)}
函数的名称并不重要，只要你想命名就可以。
正如您在封面图片中看到的，我在屏幕中央有一个文本。所以我们需要一个屏幕和一段文字！
**404.js**
export default function youdiederrorpage() { return ( // div as the screen {/* a container for the text which is centered */} {/* and a text with an id of title */} you
died
);}
如果我们只有一个文本，那么成帧器运动有什么意义呢？你是对的！让我们拥有更多具有适当样式和响应能力的文本。
**404.js**
export default function youdiederrorpage() { return ( // div as the screen {/* a container for the text */} {/* and a text with an id of title */} you
died
click here to respawn ↻ - 404: death by broken link! -
);}
你玩过类似《黑暗之魂》的游戏吗？如果你失败或死亡，“游戏结束”（或者在我们的例子中，“你死了”）文本会淡出并放大。之后， “加载游戏” 或 “退出” 按钮以及一些统计数据或其他相关信息一起出现。这将是一样的！
我们将显示标题，然后带有“单击此处重生↻”的链接文本将出现，并带有“- 404：因链接损坏而死亡！-”副标题。
如您所见，我们为每个元素提供了用于制作动画的 id。为此，我们需要 framer motion 的 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 中有范围/引用。使用容器 div 来放置动画总是比整个屏幕更好。请记住将锚链接更改为您想要的任何位置，如果您使用 nextjs，请不要忘记将其更改为下一个/链接:)
目前，就这些了。只是一个概念，提供了一种使用成帧器运动制作动画的简单好方法。预览在这里，享受并祝你有美好的一天！
以上就是注意损坏的链接、带有 Framer Motion、TailwindCSS 和 NextJs 的页面的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1489972.html
微信扫一扫 
支付宝扫一扫 
