软考找老孙
软考找老孙guoruankao.com
返回网站更新记录
体验优化2026-04-24 10:30

移动端导航菜单按钮全面加强:橙色加大、循环提示文字、脉冲动画

之前移动端浏览 www.guoruankao.com 时,右上角的导航菜单按钮只是一个灰色的小方块图标,很多学员完全没发现能点。老孙接到反馈后把它重做:改成橙色胶囊按钮 + 加粗大字 + 循环切换的提示文字("我是 / 菜单 / 点我 / 看更多"),按钮周围还有双层脉冲光环和轻微摇晃动画,想不注意到都难。

#移动端#导航菜单#可发现性#交互动画

本次更新概览

  • 按钮尺寸从 36x36 小方块升级到高 40px 胶囊,宽度自适应文字
  • 背景色从灰色图标换成橙色渐变(from-[var(--amber)] to-orange-500),配主题色阴影
  • 字体从 text-sm 提到 text-lg,字重从 font-semibold 提到 font-bold
  • 4 个循环文字"我是 / 菜单 / 点我 / 看更多",每 0.9 秒切换一次,配垂直滑入淡出动画
  • 双层脉冲光环(外层 1.8s 大圈 + 内层 1.8s 错相 0.9s 小圈)持续吸引视线
  • 额外加一层 1.6 秒左右摇晃动画,间隔 2.4 秒触发一次,像真人敲桌子提醒
  • 打开状态按钮切成灰色"关闭"文字,动画停止,避免持续干扰

用户会看到什么变化

  • 手机上访问首页时右上角"菜单"按钮极其显眼,第一眼就能看到
  • 按钮每秒都在变化文字和呼吸,不看都难
  • 打开菜单后按钮变成灰色"关闭",干净不吵
意见反馈
回到顶部咨询