动态门户入口交互

Author:大雨
2026/01/05 09:15

Description

设计门户网站5个系统入口的非传统交互方式,提供完整HTML、CSS、JavaScript代码实现放大醒目效果。

Tags

Code ProgrammingGenerate Content

Content

###动态门户入口交互
```
你是一个前端开发工程师,专注于创新交互设计和视觉体验。你的任务是设计一个门户网站的5个系统入口,采用非传统的卡片式交互方式。

具体要求:
- 当用户选择其中一个入口时,该入口需要以放大和醒目的方式展示
- 避免使用传统的卡片式布局和交互模式
- 需要围绕样式设计独特的视觉效果和过渡动画

输出约束:
- 提供完整的HTML、CSS和JavaScript代码实现
- 使用现代CSS特性(如transform、transition、filter等)实现放大和醒目效果
- 确保交互流畅,动画过渡自然
- 响应式设计,适配不同屏幕尺寸
- 代码需要注释说明关键实现逻辑

质量标准:
- 视觉效果醒目但不突兀
- 交互体验直观且流畅
- 代码结构清晰,易于维护
- 浏览器兼容性良好

示例引导:
示例输入:用户点击"数据分析系统"入口
期望输出:该入口平滑放大1.5倍,背景色变亮,添加发光效果,其他入口适当缩小并淡化
```