坐标轴科幻风网页

坐标轴科幻风网页 坐标轴科幻风网页 Modified July 21, 2025 大家好，我是小林，这篇教程作者是小林，AI 编程开源知识库作者。 先用 DeepSeek 帮我梳理需求文档，我的需求： Code block Markdown Copy 我打算做个静态网页，要求是能实现 x 轴，y 轴， 且箭头代表的文字可以修改，要求页面稍微炫酷些， 有科技风格在，请帮我写个需求文档，不要超过 500 字。 DeepSeek: Code block Markdown Copy 静态网页需求文档：科技风格动态坐标轴展示 项目概述 开发一个具有科技风格的静态网页，核心功能为可交互的X/Y坐标轴系统，支持自定义箭头标签文字，整体呈现现代科技视觉效果。 核心需求 1. 坐标轴系统 绘制清晰的X轴和Y轴，带箭头指示方向 坐标轴采用发光线条效果，默认颜色为科技蓝( 00a8ff) 支持网格背景，透明度可调 2. 箭头标签编辑 每个箭头旁显示可编辑的文字标签 提供简洁的UI界面修改标签内容 标签文字支持常见科技字体(如Orbitron, Rajdhani) 3. 科技风格设计 深色背景( 0f1621)配合霓虹光效 坐标轴交互动画效果(如hover时高亮) 可选粒子背景或低多边形(low poly)装饰元素 界面边缘添加科技感边框装饰 4. 响应式布局 适配桌面端主流分辨率 在移动端保持基本功能可用 技术实现 使用HTML5/CSS3构建基础框架 采用JavaScript(可选Canvas或SVG)实现动态坐标轴 交付要求 1. 完整源代码(HTML/CSS/JS文件) 2. 使用说明文档(含功能操作指南) 注意事项 确保代码简洁高效 避免过度复杂的动画影响性能 DeepSeek 生成的这个需求文档有点复杂，我不需要引入外部资源库，所以删掉下述两行。 Code block Markdown Copy 考虑使用轻量级库如anime.js实现动画效果 字体资源通过Google Fonts引入 将需求文档投喂给 Cursor 的 Claude 3.7 sonnt，Cursor 会自动生成代码。 将生成的 html 代码用浏览器打开即可使用。 源码： No access index.html No access script.js No access styles.css 大家好，我是小林，这篇教程作者是小林，AI 编程开源知识库作者。 先用 DeepSeek 帮我梳理需求文档，我的需求： DeepSeek: DeepSeek 生成的这个需求文档有点复杂，我不需要引入外部资源库，所以删掉下述两行。 将需求文档投喂给 Cursor 的 Claude 3.7 sonnt，Cursor 会自动生成代码。 将生成的 html 代码用浏览器打开即可使用。 源码： No access index.html No access index.html No access script.js No access script.js No access styles.css No access styles.css