这是一款基于CSS 动画与原生 JavaScript技术实现的绿色网格光带登录表单。整屏深色方格后方有一条绿色光带上下移动，鼠标扫过网格时，对应方格亮起后缓缓暗下。中央登录区包含用户名、密码、忘记密码和注册链接，输入时标签向上缩小。脚本生成背景方格，光带移动、悬停反馈和输入状态都由 CSS 处理，适合科技风登录入口与界面原型。

霓虹网格登录页的背景与输入反馈

光带从方格缝隙透出。背景渐变层持续移动，上方深色方格形成规律网格，不需要视频或图片。
悬停颜色带有停留感。进入方格时即时变亮，离开后按较长过渡褪色，鼠标移动会留下短暂轨迹。
输入标签跟随状态变化。聚焦或字段已有内容时，说明文字上移，避免继续覆盖输入区域。

绿色光带怎样从方格缝隙中出现

背景方格采用重复的 span 元素，脚本启动时批量插入，CSS 按断点调整单格宽度。光带位于伪元素中，借助纵向变换循环扫过；方格自身的背景遮住大部分渐变，只让间隙显色。表单叠在背景上方，不参与网格悬停。

"<span></span>".repeat(256)

霓虹登录表单的主题和网格如何调整

主题绿、背景黑、方格色和输入框颜色在 style.css 顶部变量中，光带周期在 animate 关键帧附近；方格数量在 script.js。字段和中文文案位于 index.html，小屏表单宽度已限制在视口以内。改变网格尺寸时，要同时检查节点数量能否覆盖整个画面。

网格登录页的业务与触屏适配问题

这个页面已经有登录验证吗？

没有。当前只有表单外观、输入状态和动画，未连接账户服务，忘记密码及注册入口也需要设置实际地址。

手机上为什么没有鼠标轨迹？

悬停轨迹面向鼠标操作，触屏通常无法持续触发相同的 hover 行为；背景光带会继续运行，表单仍可输入。

如何让动画更轻一些？

可降低方格数量、延长光带周期，并在页面不可见时暂停展示。若不需要轨迹效果，保留静态网格也能维持整体风格。

适合科技专题、后台入口原型和霓虹主题界面。完整网格结构与表单状态样式可下载查看。