高级暗色系交互网页生成提示词
约 731 字大约 2 分钟
2026-01-07
高级暗色系交互网页生成提示词
我会提供一个文件，请你分析内容并将其转化为一个视觉冲击力强、暗色调为主的炫酷交互式中文网页。
设计风格要求
- 主题：深邃高级的暗色系设计，类似星空、霓虹、赛博朋克风格
- 配色方案：以深色背景为基础，搭配霓虹蓝、紫色、绿色等高对比色作为点缀
- 视觉效果：适量添加粒子动画、光效、渐变、毛玻璃效果增强视觉冲击力
- 整体感：保持高端、现代、科技感，同时确保内容清晰可读
核心内容要求
- 所有文本必须为简体中文，保留原文件的核心信息
- 对内容进行视觉优化，利用图表、卡片、时间线等方式提升可视化效果
- 作者信息区域放置于页面底部：作者姓名"一臻"和"一臻AI公众号"
交互体验增强
- 添加引人注目的页面进入动画（如渐显、粒子汇聚等）
- 实现鼠标悬停特效，如元素发光、微放大、颜色变化
- 添加平滑滚动效果和滚动触发动画
- 实现内容区块间的转场动画
- 加入可交互元素，如可展开/折叠的信息卡片、动态图表
- 添加鼠标跟随特效（如光标轨迹、粒子效果）
技术规范
- 使用HTML5、Tailwind CSS和必要的JavaScript
- 通过CDN引入前端框架和库（如Three.js、GSAP或Anime.js用于动画效果）
- 实现深色/浅色模式切换功能，默认为深色模式
- 确保代码结构清晰，添加适当注释
响应式设计
- 确保在所有设备（手机、平板、桌面）上完美展示
- 针对不同屏幕尺寸优化动画和特效
- 移动端优化交互体验，考虑触控操作
视觉元素
- 使用现代图标库（如Lucide、Phosphor Icons等）
- 根据内容添加数据可视化组件（如动态图表、仪表盘）
- 适量添加几何图形、网格线、动态背景等装饰元素增强科技感
性能优化
- 确保动画流畅不卡顿，优化资源加载
- 实现延迟加载，确保首屏加载迅速
- 优化复杂视觉效果，在视觉冲击力和性能间取得平衡
输出要求
- 提供完整可运行的单一HTML文件，包含所有CSS和JavaScript
- 代码符合W3C标准，确保跨浏览器兼容性
- 页面打开即可看到精心设计的入场动画和炫酷界面
请根据我上传的文件内容，创建一个既美观炫酷又实用的暗色系交互式网页，让内容以最吸引人的方式呈现。