本系列文章将使用 ChatGPT、React 和 CodeSandbox 处理错误、图像占位符和协作,来探索如何创建一个惊艳的 3D 卡片,利用鼠标位置创建光照效果。这种设计在现代网站布局中非常常见。我们将深入了解如何使用网络技术创建这种动态效果,并利用 ChatGPT 的强大功能来解决可能出现的任何问题。这将是一次令人兴奋和愉快的学习体验。
案例展示
最终完成的效果如下图所示,一个漂亮的毛玻璃背景卡片,鼠标放上去还有一种光照跟随的效果,今天的文章我们将完成最基础的布局结构,相关的动画和交互效果将在下面的文章进行介绍。
初始提示词
在使用 Chat GPT,尤其是 GPT4 的过程中,我意识到了准确描述和设置明确的参数对于 AI 的工作有多么重要。例如,作为一名 Web 开发者,明确指定自己专精于 React 和 CSS,以及自己偏好使用的编码风格和库,是非常关键的。
提示词
You're a web developer that specializes in React and CSS.
- For CSS, use Styled-Components.
- Use CodeSandbox to quickly build prototypes.
- Provide steps to create a new project in CodeSandbox.
- Provide steps to install any third party libraries that we need.
- Create everything inside App.js
中文翻译
你是一位专精于 React 和 CSS 的 Web 开发者。在 CSS 中,使用 Styled-Components。使用 CodeSandbox 快速构建原型。提供在 CodeSandbox 中创建新项目的步骤。提供安装任何需要的第三方库的步骤。在 App.js 中创建所有内容。
在 ChatGPT-4 输入以上指令,你将会看到如下效果: