简介这是一份基于layui框架构建的用户登录界面响应式动画模板面向前端初学者与需要快速搭建登录页的开发者解决多设备适配与交互体验不足的问题。资源包共46个文件约290KB以20个JavaScript脚本、11个CSS样式表为主辅以8张PNG、3张GIF及JPG、SVG等图片素材另含1个HTML入口与1份readme说明涵盖jQuery、layui组件、粒子背景与加载动画等依赖结构清晰便于二次修改。目前已有1355人学习下载。模板通过媒体查询实现桌面、平板与手机端的自适应布局并借助layui内置动画类为登录框、提示信息加入淡入淡出与滑动效果使错误提示、成功反馈更醒目。读者可直接获得一套可运行的登录页源码理解响应式断点设置、表单验证与动画API调用方式适合作为课程设计或后台系统登录模块的参考案例。1. 一个登录页为什么值得用 layui 单独做一套响应式动画模板后台管理系统里最容易被忽视、又最常被吐槽的页面就是登录页。业务页面有产品经理盯着登录页往往丢给一个刚入行的前端随手糊一个表单结果 PC 上勉强能看手机上一放大就错位输入框聚焦没反馈按钮点下去像卡死。layui 用户登录界面响应式动画模板要解决的正是这件事用 layui 这套经典的后台 UI 框架把登录页做成一套在桌面、平板、手机三档屏幕下都不塌、且带入场动画和交互反馈的模板。它适合两类人一类是维护老后台系统、技术栈已经锁死 layui 的工程师另一类是刚接触响应式布局、想找一个真实可跑的小场景练手的新手。整套东西不依赖构建工具一个 HTML 文件加一份 CSS 就能跑起来改起来也不心疼。下面我按自己实际落地的顺序把结构、动画、响应式断点和踩过的坑讲清楚。2. 拆解 layui 登录模板的骨架从表单结构到响应式断点2.1 为什么选 layui 而不是手写一套表单layui 的定位是「经典模块化 UI」它最大的价值不是组件多花哨而是表单、按钮、输入框这些基础件已经帮你处理好了浏览器默认样式的差异。登录页里真正难搞的从来不是布局而是 input 在 Chrome、Safari、部分国产内核浏览器下高度不一致、placeholder 颜色不一致、聚焦时 outline 处理不一致。layui 的layui-input、layui-btn把这些差异抹平了你只需要关心间距和动画。另一个现实原因是存量系统。很多政企、内部管理平台的技术栈就是 layui jQuery你不可能为了一个登录页引入 Vue 或 React。用 layui 做模板意味着这套代码能直接塞进现有工程不用动构建配置。这也是我一般会优先考虑 layui 的原因迁移成本几乎为零。选型上要注意一点layui 2.x 和 layui 3.x 在表单渲染上有差异。2.x 依赖layui.form.render()手动渲染3.x 对部分组件做了调整。模板本身尽量只用最基础的 class不依赖form.render()的高级特性这样两个版本都能跑。2.2 最小可跑的 HTML 骨架先给出可以直接保存成login.html打开就能看的骨架。这里用 CDN 引入 layui实际项目里换成你本地的路径即可。!DOCTYPE html html langzh-CN head meta charsetUTF-8 !-- viewport 是响应式的命门缺了它手机端所有断点都失效 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 title登录/title link relstylesheet hrefhttps://cdn.staticfile.org/layui/2.8.18/css/layui.css link relstylesheet href./login.css /head body !-- login-wrap 负责全屏居中login-box 是动画载体 -- div classlogin-wrap div classlogin-box div classlogin-header h2后台管理系统/h2 p请使用管理员账号登录/p /div form classlayui-form action div classlayui-form-item input typetext nameusername placeholder用户名 autocompleteoff classlayui-input /div div classlayui-form-item input typepassword namepassword placeholder密码 autocompleteoff classlayui-input /div div classlayui-form-item button classlayui-btn layui-btn-fluid lay-submit lay-filterlogin 登 录 /button /div /form /div /div script srchttps://cdn.staticfile.org/layui/2.8.18/layui.js/script script src./login.js/script /body /html结构上只有三层login-wrap负责把内容在视口里居中login-box是承载动画和阴影的卡片里面是 layui 的标准表单。layui-btn-fluid让按钮撑满宽度省得自己写 width。这里刻意没有用 layui 的栅格layui-row因为登录卡片本身是单列布局用栅格反而多一层嵌套响应式断点不好控。2.3 响应式断点怎么定三档而不是五档很多人做响应式喜欢堆一堆媒体查询320、375、414、768、1024、1440 全来一遍结果维护起来是灾难。登录页这种单卡片布局三档足够断点屏幕宽度卡片宽度内边距说明手机 768px92%20px卡片几乎占满留一点边距平板768px ~ 1024px420px32px固定宽度居中桌面 1024px400px40px固定宽度视觉更紧凑对应的 CSS 核心部分/* 基础样式桌面优先再向下覆盖 */ .login-wrap { min-height: 100vh; /* 用 vh 而不是 height避免内容超出被裁 */ display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3c72, #2a5298); padding: 20px; box-sizing: border-box; } .login-box { width: 400px; padding: 40px; background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); box-sizing: border-box; } /* 平板档 */ media screen and (max-width: 1024px) { .login-box { width: 420px; padding: 32px; } } /* 手机档 */ media screen and (max-width: 767px) { .login-box { width: 92%; padding: 20px; } .login-header h2 { font-size: 20px; } }这里有个容易翻车的点min-height: 100vh在移动端浏览器里会因为地址栏收起展开导致高度跳动。稳妥做法是配合padding和box-sizing或者用100dvh做渐进增强。我一般先写100vh再加一行min-height: 100dvh兜底老浏览器忽略后者即可。3. 给登录卡片加入场动画CSS keyframes 与 layui 的配合3.1 动画放在哪一层决定了会不会掉帧动画载体选错层是登录页卡顿的头号原因。如果你把box-shadow、width、padding这些会触发重排的属性拿去做动画浏览器每一帧都要重新计算布局低端安卓机上直接掉到 20 帧。正确做法是把动画加在transform和opacity上这两个属性走的是合成层不触发重排重绘。所以入场动画我一般这么写卡片从下方 20px 处淡入并上移同时轻微缩放。整个过程只动transform和opacity。/* 入场动画只动 transform 和 opacity保证合成层渲染 */ keyframes loginIn { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-box { animation: loginIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }cubic-bezier(0.22, 1, 0.36, 1)是一条先快后慢的缓动曲线比默认的ease更有「落定」的感觉这也是很多设计系统里常用的缓动。both关键字保证动画开始前应用from状态、结束后保持to状态避免闪烁。3.2 表单元素的错峰入场卡片整体入场之后如果输入框和按钮同时出现会显得很平。给它们加一点延迟形成错峰视觉上更有层次。用animation-delay配合both就能实现不需要 JS。/* 表单元素错峰入场延迟依次递增 */ .login-box .layui-form-item { opacity: 0; animation: loginIn 0.4s ease-out both; } .login-box .layui-form-item:nth-child(1) { animation-delay: 0.15s; } .login-box .layui-form-item:nth-child(2) { animation-delay: 0.25s; } .login-box .layui-form-item:nth-child(3) { animation-delay: 0.35s; }延迟间隔控制在 0.1s 左右比较舒服间隔太大用户会觉得页面在「慢慢加载」间隔太小又看不出层次。这里用nth-child而不是给每个元素加 class是为了让 HTML 保持干净代价是表单结构变了要同步改 CSS属于可接受的取舍。3.3 输入框聚焦反馈别只靠 outlinelayui 默认的输入框聚焦样式比较弱在深色背景的登录页上几乎看不出来。我一般会加一条底部边框的过渡动画聚焦时边框颜色渐变同时轻微上浮。.layui-input { height: 44px; border: 1px solid #dcdfe6; border-radius: 4px; transition: border-color 0.25s, box-shadow 0.25s; } .layui-input:focus { border-color: #2a5298; box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.12); }box-shadow做聚焦光晕比outline更好控制也不会像outline那样在部分浏览器里出现方角。注意transition里只列需要过渡的属性别写allall会把布局属性也带上容易出意外。3.4 按钮的点击反馈与加载态登录按钮点下去如果没有反馈用户会以为没点上然后狂点最后发出好几个请求。按钮的:active状态加一个缩放再配合提交时的 loading 态能解决大部分误操作。.layui-btn { height: 44px; transition: transform 0.15s, box-shadow 0.15s; } .layui-btn:active { transform: scale(0.98); }提交逻辑里用 layui 自带的 loading比手写 spinner 省事layui.use([form, layer], function () { var form layui.form; var layer layui.layer; form.on(submit(login), function (data) { var loadIndex layer.load(2); // 2 是加载图标样式 // 模拟请求实际替换成你的接口 setTimeout(function () { layer.close(loadIndex); layer.msg(登录成功); }, 800); return false; // 阻止表单默认跳转 }); });return false这行是必须的layui 表单默认会走原生提交导致页面刷新很多人第一次用会漏掉然后纳闷为什么动画一闪就没了。4. 避坑与排查登录模板最容易翻车的 5 个地方4.1 手机端页面能左右拖动卡片溢出屏幕现象在手机上打开页面可以左右滑动卡片右边被切掉一块。原因某个子元素宽度超过了父容器最常见的是输入框加了固定width或者padding没有配合box-sizing: border-box导致实际宽度 设定宽度 内边距。解决全局加box-sizing: border-box输入框宽度用100%而不是固定像素。再给body加overflow-x: hidden兜底但这只是遮丑根因还是要找到溢出的元素。4.2 动画在低端安卓机上卡顿现象桌面浏览器动画丝滑到了千元安卓机上卡片入场一顿一顿。原因动画属性里混进了box-shadow、width、top这类触发重排重绘的属性或者动画元素层级太深合成层没提起来。解决动画只用transform和opacity。如果还是卡给动画元素加will-change: transform提前提升合成层但注意will-change不能滥用用完最好在动画结束后移除否则会一直占显存。4.3 输入框在 iOS 上聚焦时页面被顶上去现象iPhone 上点输入框键盘弹起整个页面被顶飞卡片跑到屏幕外。原因iOS Safari 在输入框聚焦时会自动滚动到输入框位置如果卡片是垂直居中的滚动行为会很突兀。解决把login-wrap的align-items: center在手机断点下改成flex-start配合padding-top让卡片靠上而不是居中。这样键盘弹起时滚动幅度小很多。4.4 layui 表单样式没生效输入框是原生样式现象引入了 layui.css但输入框还是浏览器默认的方框没有圆角和高度。原因多半是 CSS 路径错了或者被自己的样式覆盖。也有一种情况是用了 layui 3.x 但 class 名沿用了 2.x 的写法。解决打开控制台看layui-input这个 class 有没有匹配到样式。如果路径没问题检查自己的 CSS 是不是在 layui.css 之后引入并且用了更高优先级的选择器把样式盖掉了。4.5 提交按钮点了没反应现象按钮能点动画也有但表单不提交控制台也没报错。原因form.on(submit(login))里的login必须和按钮上的lay-filterlogin完全一致大小写、拼写错一个字符就绑不上。另一个原因是layui.use里没引入form模块。解决核对lay-filter和submit()里的过滤器名确认layui.use([form])引入了 form 模块。如果还是不行在回调里打一行console.log确认有没有进去。5. 进阶用 CSS 变量把主题和动画参数抽出来模板做完之后如果每个项目都复制一份改颜色改时长很快就会失控。我后来的习惯是把主题色、圆角、动画时长全部抽成 CSS 变量放在:root里换主题只改一处。:root { --login-primary: #2a5298; /* 主色按钮和聚焦边框共用 */ --login-radius: 8px; /* 卡片圆角 */ --login-duration: 0.5s; /* 入场动画时长 */ --login-ease: cubic-bezier(0.22, 1, 0.36, 1); } .login-box { border-radius: var(--login-radius); animation: loginIn var(--login-duration) var(--login-ease) both; } .layui-input:focus { border-color: var(--login-primary); box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.12); }这样一套模板能覆盖多个后台系统的品牌色需求改一个变量就能换肤。动画时长也能按项目调有的客户喜欢快一点有的喜欢慢一点不用去翻 keyframes。验证动画是否真的走合成层别靠肉眼猜。Chrome DevTools 的 Rendering 面板里打开「Paint flashing」和「Layer borders」动画播放时如果卡片边缘出现绿色边框说明它被提升到了独立合成层动画不会触发重排。如果整个页面都在闪绿说明动画属性选错了回去检查是不是动了box-shadow或width。还有一个我踩过的坑animation-delay配合both时如果用户刷新页面动画会重新播一遍这在登录页是合理的。但如果你的模板被嵌进 SPA 里做路由切换每次切回来都重播动画会很烦。这时候把动画类名单独抽出来用 JS 在首次挂载时加一次之后不再加就能避免重复播放。我现在的习惯是任何登录页模板都先跑一遍真机尤其是那台抽屉里躺着的旧安卓机。桌面浏览器上再顺滑的动画到了真机上才是真相。这套 layui 登录模板我前后改过七八版最大的教训就是别在动画里图省事写transition: all也别信「桌面看着没问题就行」。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/27 6:05:49 · 阅读 1.2k layui登录页响应式动画模板：从表单结构到CSS动画的完整实现
简介这是一份基于layui框架构建的用户登录界面响应式动画模板面向前端初学者与需要快速搭建登录页的开发者解决多设备适配与交互体验不足的问题。资源包共46个文件约290KB以20个JavaScript脚本、11个CSS样式表为主辅以8张PNG、3张GIF及JPG、SVG等图片素材另含1个HTML入口与1份readme说明涵盖jQuery、layui组件、粒子背景与加载动画等依赖结构清晰便于二次修改。目前已有1355人学习下载。模板通过媒体查询实现桌面、平板与手机端的自适应布局并借助layui内置动画类为登录框、提示信息加入淡入淡出与滑动效果使错误提示、成功反馈更醒目。读者可直接获得一套可运行的登录页源码理解响应式断点设置、表单验证与动画API调用方式适合作为课程设计或后台系统登录模块的参考案例。1. 一个登录页为什么值得用 layui 单独做一套响应式动画模板后台管理系统里最容易被忽视、又最常被吐槽的页面就是登录页。业务页面有产品经理盯着登录页往往丢给一个刚入行的前端随手糊一个表单结果 PC 上勉强能看手机上一放大就错位输入框聚焦没反馈按钮点下去像卡死。layui 用户登录界面响应式动画模板要解决的正是这件事用 layui 这套经典的后台 UI 框架把登录页做成一套在桌面、平板、手机三档屏幕下都不塌、且带入场动画和交互反馈的模板。它适合两类人一类是维护老后台系统、技术栈已经锁死 layui 的工程师另一类是刚接触响应式布局、想找一个真实可跑的小场景练手的新手。整套东西不依赖构建工具一个 HTML 文件加一份 CSS 就能跑起来改起来也不心疼。下面我按自己实际落地的顺序把结构、动画、响应式断点和踩过的坑讲清楚。2. 拆解 layui 登录模板的骨架从表单结构到响应式断点2.1 为什么选 layui 而不是手写一套表单layui 的定位是「经典模块化 UI」它最大的价值不是组件多花哨而是表单、按钮、输入框这些基础件已经帮你处理好了浏览器默认样式的差异。登录页里真正难搞的从来不是布局而是 input 在 Chrome、Safari、部分国产内核浏览器下高度不一致、placeholder 颜色不一致、聚焦时 outline 处理不一致。layui 的layui-input、layui-btn把这些差异抹平了你只需要关心间距和动画。另一个现实原因是存量系统。很多政企、内部管理平台的技术栈就是 layui jQuery你不可能为了一个登录页引入 Vue 或 React。用 layui 做模板意味着这套代码能直接塞进现有工程不用动构建配置。这也是我一般会优先考虑 layui 的原因迁移成本几乎为零。选型上要注意一点layui 2.x 和 layui 3.x 在表单渲染上有差异。2.x 依赖layui.form.render()手动渲染3.x 对部分组件做了调整。模板本身尽量只用最基础的 class不依赖form.render()的高级特性这样两个版本都能跑。2.2 最小可跑的 HTML 骨架先给出可以直接保存成login.html打开就能看的骨架。这里用 CDN 引入 layui实际项目里换成你本地的路径即可。!DOCTYPE html html langzh-CN head meta charsetUTF-8 !-- viewport 是响应式的命门缺了它手机端所有断点都失效 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 title登录/title link relstylesheet hrefhttps://cdn.staticfile.org/layui/2.8.18/css/layui.css link relstylesheet href./login.css /head body !-- login-wrap 负责全屏居中login-box 是动画载体 -- div classlogin-wrap div classlogin-box div classlogin-header h2后台管理系统/h2 p请使用管理员账号登录/p /div form classlayui-form action div classlayui-form-item input typetext nameusername placeholder用户名 autocompleteoff classlayui-input /div div classlayui-form-item input typepassword namepassword placeholder密码 autocompleteoff classlayui-input /div div classlayui-form-item button classlayui-btn layui-btn-fluid lay-submit lay-filterlogin 登 录 /button /div /form /div /div script srchttps://cdn.staticfile.org/layui/2.8.18/layui.js/script script src./login.js/script /body /html结构上只有三层login-wrap负责把内容在视口里居中login-box是承载动画和阴影的卡片里面是 layui 的标准表单。layui-btn-fluid让按钮撑满宽度省得自己写 width。这里刻意没有用 layui 的栅格layui-row因为登录卡片本身是单列布局用栅格反而多一层嵌套响应式断点不好控。2.3 响应式断点怎么定三档而不是五档很多人做响应式喜欢堆一堆媒体查询320、375、414、768、1024、1440 全来一遍结果维护起来是灾难。登录页这种单卡片布局三档足够断点屏幕宽度卡片宽度内边距说明手机 768px92%20px卡片几乎占满留一点边距平板768px ~ 1024px420px32px固定宽度居中桌面 1024px400px40px固定宽度视觉更紧凑对应的 CSS 核心部分/* 基础样式桌面优先再向下覆盖 */ .login-wrap { min-height: 100vh; /* 用 vh 而不是 height避免内容超出被裁 */ display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3c72, #2a5298); padding: 20px; box-sizing: border-box; } .login-box { width: 400px; padding: 40px; background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); box-sizing: border-box; } /* 平板档 */ media screen and (max-width: 1024px) { .login-box { width: 420px; padding: 32px; } } /* 手机档 */ media screen and (max-width: 767px) { .login-box { width: 92%; padding: 20px; } .login-header h2 { font-size: 20px; } }这里有个容易翻车的点min-height: 100vh在移动端浏览器里会因为地址栏收起展开导致高度跳动。稳妥做法是配合padding和box-sizing或者用100dvh做渐进增强。我一般先写100vh再加一行min-height: 100dvh兜底老浏览器忽略后者即可。3. 给登录卡片加入场动画CSS keyframes 与 layui 的配合3.1 动画放在哪一层决定了会不会掉帧动画载体选错层是登录页卡顿的头号原因。如果你把box-shadow、width、padding这些会触发重排的属性拿去做动画浏览器每一帧都要重新计算布局低端安卓机上直接掉到 20 帧。正确做法是把动画加在transform和opacity上这两个属性走的是合成层不触发重排重绘。所以入场动画我一般这么写卡片从下方 20px 处淡入并上移同时轻微缩放。整个过程只动transform和opacity。/* 入场动画只动 transform 和 opacity保证合成层渲染 */ keyframes loginIn { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-box { animation: loginIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }cubic-bezier(0.22, 1, 0.36, 1)是一条先快后慢的缓动曲线比默认的ease更有「落定」的感觉这也是很多设计系统里常用的缓动。both关键字保证动画开始前应用from状态、结束后保持to状态避免闪烁。3.2 表单元素的错峰入场卡片整体入场之后如果输入框和按钮同时出现会显得很平。给它们加一点延迟形成错峰视觉上更有层次。用animation-delay配合both就能实现不需要 JS。/* 表单元素错峰入场延迟依次递增 */ .login-box .layui-form-item { opacity: 0; animation: loginIn 0.4s ease-out both; } .login-box .layui-form-item:nth-child(1) { animation-delay: 0.15s; } .login-box .layui-form-item:nth-child(2) { animation-delay: 0.25s; } .login-box .layui-form-item:nth-child(3) { animation-delay: 0.35s; }延迟间隔控制在 0.1s 左右比较舒服间隔太大用户会觉得页面在「慢慢加载」间隔太小又看不出层次。这里用nth-child而不是给每个元素加 class是为了让 HTML 保持干净代价是表单结构变了要同步改 CSS属于可接受的取舍。3.3 输入框聚焦反馈别只靠 outlinelayui 默认的输入框聚焦样式比较弱在深色背景的登录页上几乎看不出来。我一般会加一条底部边框的过渡动画聚焦时边框颜色渐变同时轻微上浮。.layui-input { height: 44px; border: 1px solid #dcdfe6; border-radius: 4px; transition: border-color 0.25s, box-shadow 0.25s; } .layui-input:focus { border-color: #2a5298; box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.12); }box-shadow做聚焦光晕比outline更好控制也不会像outline那样在部分浏览器里出现方角。注意transition里只列需要过渡的属性别写allall会把布局属性也带上容易出意外。3.4 按钮的点击反馈与加载态登录按钮点下去如果没有反馈用户会以为没点上然后狂点最后发出好几个请求。按钮的:active状态加一个缩放再配合提交时的 loading 态能解决大部分误操作。.layui-btn { height: 44px; transition: transform 0.15s, box-shadow 0.15s; } .layui-btn:active { transform: scale(0.98); }提交逻辑里用 layui 自带的 loading比手写 spinner 省事layui.use([form, layer], function () { var form layui.form; var layer layui.layer; form.on(submit(login), function (data) { var loadIndex layer.load(2); // 2 是加载图标样式 // 模拟请求实际替换成你的接口 setTimeout(function () { layer.close(loadIndex); layer.msg(登录成功); }, 800); return false; // 阻止表单默认跳转 }); });return false这行是必须的layui 表单默认会走原生提交导致页面刷新很多人第一次用会漏掉然后纳闷为什么动画一闪就没了。4. 避坑与排查登录模板最容易翻车的 5 个地方4.1 手机端页面能左右拖动卡片溢出屏幕现象在手机上打开页面可以左右滑动卡片右边被切掉一块。原因某个子元素宽度超过了父容器最常见的是输入框加了固定width或者padding没有配合box-sizing: border-box导致实际宽度 设定宽度 内边距。解决全局加box-sizing: border-box输入框宽度用100%而不是固定像素。再给body加overflow-x: hidden兜底但这只是遮丑根因还是要找到溢出的元素。4.2 动画在低端安卓机上卡顿现象桌面浏览器动画丝滑到了千元安卓机上卡片入场一顿一顿。原因动画属性里混进了box-shadow、width、top这类触发重排重绘的属性或者动画元素层级太深合成层没提起来。解决动画只用transform和opacity。如果还是卡给动画元素加will-change: transform提前提升合成层但注意will-change不能滥用用完最好在动画结束后移除否则会一直占显存。4.3 输入框在 iOS 上聚焦时页面被顶上去现象iPhone 上点输入框键盘弹起整个页面被顶飞卡片跑到屏幕外。原因iOS Safari 在输入框聚焦时会自动滚动到输入框位置如果卡片是垂直居中的滚动行为会很突兀。解决把login-wrap的align-items: center在手机断点下改成flex-start配合padding-top让卡片靠上而不是居中。这样键盘弹起时滚动幅度小很多。4.4 layui 表单样式没生效输入框是原生样式现象引入了 layui.css但输入框还是浏览器默认的方框没有圆角和高度。原因多半是 CSS 路径错了或者被自己的样式覆盖。也有一种情况是用了 layui 3.x 但 class 名沿用了 2.x 的写法。解决打开控制台看layui-input这个 class 有没有匹配到样式。如果路径没问题检查自己的 CSS 是不是在 layui.css 之后引入并且用了更高优先级的选择器把样式盖掉了。4.5 提交按钮点了没反应现象按钮能点动画也有但表单不提交控制台也没报错。原因form.on(submit(login))里的login必须和按钮上的lay-filterlogin完全一致大小写、拼写错一个字符就绑不上。另一个原因是layui.use里没引入form模块。解决核对lay-filter和submit()里的过滤器名确认layui.use([form])引入了 form 模块。如果还是不行在回调里打一行console.log确认有没有进去。5. 进阶用 CSS 变量把主题和动画参数抽出来模板做完之后如果每个项目都复制一份改颜色改时长很快就会失控。我后来的习惯是把主题色、圆角、动画时长全部抽成 CSS 变量放在:root里换主题只改一处。:root { --login-primary: #2a5298; /* 主色按钮和聚焦边框共用 */ --login-radius: 8px; /* 卡片圆角 */ --login-duration: 0.5s; /* 入场动画时长 */ --login-ease: cubic-bezier(0.22, 1, 0.36, 1); } .login-box { border-radius: var(--login-radius); animation: loginIn var(--login-duration) var(--login-ease) both; } .layui-input:focus { border-color: var(--login-primary); box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.12); }这样一套模板能覆盖多个后台系统的品牌色需求改一个变量就能换肤。动画时长也能按项目调有的客户喜欢快一点有的喜欢慢一点不用去翻 keyframes。验证动画是否真的走合成层别靠肉眼猜。Chrome DevTools 的 Rendering 面板里打开「Paint flashing」和「Layer borders」动画播放时如果卡片边缘出现绿色边框说明它被提升到了独立合成层动画不会触发重排。如果整个页面都在闪绿说明动画属性选错了回去检查是不是动了box-shadow或width。还有一个我踩过的坑animation-delay配合both时如果用户刷新页面动画会重新播一遍这在登录页是合理的。但如果你的模板被嵌进 SPA 里做路由切换每次切回来都重播动画会很烦。这时候把动画类名单独抽出来用 JS 在首次挂载时加一次之后不再加就能避免重复播放。我现在的习惯是任何登录页模板都先跑一遍真机尤其是那台抽屉里躺着的旧安卓机。桌面浏览器上再顺滑的动画到了真机上才是真相。这套 layui 登录模板我前后改过七八版最大的教训就是别在动画里图省事写transition: all也别信「桌面看着没问题就行」。希望帮到你。本文还有配套的精品资源点击获取