介绍
这个包聚焦定价表单与鼠标悬停反馈。首屏左侧是套餐选择区,右侧是咨询表单和费用摘要,用户悬停卡片时会触发高亮、边框扩散和价格说明切换,适合 SaaS 定价页、活动报名页或服务咨询模块。

技术栈
页面由 index.html、styles.css 和 script.js 组成,直接双击即可运行,不依赖 npm、框架或外部 CDN。
软件架构
- index.html:负责首屏主体、交互按钮和内容说明区。
- styles.css:负责布局、设计变量、动画节奏、响应式与 reduced-motion 降级。
- script.js:负责状态切换、鼠标反馈、按钮联动和动态文案刷新。
- preview.png:当前页面的真实浏览器截图,可直接用作下载页封面。
安装教程
- 下载并解压 zip 压缩包。
- 进入同名目录后双击 index.html 直接预览。
- 如果要部署到站点,把整个目录上传到静态服务器即可。
使用说明
先将鼠标悬停到不同套餐卡上查看高亮反馈,再填写团队人数和联系信息,右侧费用栏会同步更新。复用时只需替换套餐数据、表单字段和品牌色,就能改造成报价页、会员订阅页或服务开通页。
功能讲解
- 首屏直接展示定价卡和表单,不再只剩标题文字。
- 套餐悬停态、选中态和费用摘要会联动,突出鼠标悬停动画在真实表单中的作用。
- 信息层级清晰,适合下载后直接接入报名、报价或订阅流程。
