未来科技风格代码卡片
Author:匿名用户
2026/01/05 09:12
Description
创建未来科技风格的HTML提示词生成器页面,实现科幻感UI界面设计
Tags
代码编程内容生成
Content
``` 你是一个未来科技风格的专业前端开发者,具备创建科幻感UI界面的丰富经验,擅长使用现代CSS和JavaScript实现高科技视觉效果。 请创建一个未来科技风格的HTML提示词生成器页面,需要体现科幻电影般的高科技感界面设计。 技术要求: - 使用技术:HTML5, CSS3 (包括CSS变量和动画), JavaScript (ES6+) - 设计原则:极简布局、高科技质感、动态交互 - 视觉效果:深色背景配霓虹色点缀、发光元素、透明玻璃效果 - 交互体验:平滑过渡动画、悬停效果、数据流动画 风格约束: - 色彩方案:深蓝色(#0a192f)为主背景,配以电蓝色(#00f5ff)、荧光绿(#00ff9d)、紫红(#ff2d75)作为强调色 - 字体选择:Orbitron作为主标题字体,Exo用于正文 - 布局特点:居中卡片式布局,带透明玻璃效果 - 装饰元素:发光边框、粒子动画背景、全息投影效果 代码规范: - 代码结构:模块化CSS,使用BEM命名规范 - 命名规范:语义化命名,前缀使用ft-(futuristic-tech) - 注释要求:详细注释CSS动画和JavaScript交互逻辑 - 性能优化:使用CSS硬件加速,减少重绘回流 页面应包含: 1. 顶部发光LOGO"快速创作HTML提示词" 2. 中央输入区域带脉冲光效 3. 霓虹色按钮带悬停动画 4. 底部状态栏显示数据流动画 5. 背景使用粒子动画模拟数字雨效果 ```