跳到主要内容移动端高颜值登录页实战:动态背景与仿幕布风格 | 极客日志HTML / CSSWeChat大前端
移动端高颜值登录页实战:动态背景与仿幕布风格
分享两款移动端高颜值登录页模板,分别包含动态背景视觉流与仿幕布极简风格。内容涵盖 HTML 结构搭建、基于 750px 设计图的 rem 适配方案、CSS 背景动画关键帧设置以及表单交互细节。代码经过清理,可直接用于前端项目,帮助快速构建美观且合规的登录界面。
Qiny012 浏览 移动端高颜值登录页实战
昨天分享了一波纯 HTML + CSS 的手机端登录界面,今天观察了市面上几个主流 APP 的登录流程,发现手机号登录和第三方授权是标配。于是决定优化一下设计,带来第二波实战方案。
这次主要演示两种风格:一种是带有动态背景的视觉流,另一种是仿幕布 APP 的极简导图风。代码直接可用,咱们直接看实现细节。
动态背景风格
这种风格适合需要强视觉冲击的场景。核心思路是利用 CSS animation 控制背景图的位置,配合 calc 计算 rem 单位,确保在不同屏幕下的适配性。
效果预览
静态布局清晰,动态部分通过背景位移产生流动感。

核心代码实现
HTML 结构保持语义化,表单分组清晰,方便后续扩展验证逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login 01</title>
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/login1.css" />
</head>
<body>
<div =>
登录
忘记密码?
没有账号,去注册
登录
—其他方式登录—
class
"login-page"
<div class="login-page__main">
<div class="login-page__title">
</div>
<form action="">
<div class="login-page__form">
<section class="rel login-page__form-group">
<i class="iconfont icon-user">
</i>
<input class="login-page__form-group-input" name="tel" type="text" placeholder="请输入手机号" />
</section>
<section class="rel login-page__form-group">
<i class="iconfont icon-pwd">
</i>
<input class="login-page__form-group-input" name="pwd" type="text" placeholder="请输入密码" />
</section>
<section class="login-page__form-group login-page__guide">
<a href="#">
</a>
<a href="#">
</a>
</section>
<div class="login-page__submit-btn">
</div>
</div>
</form>
<div class="login-methods">
<p class="login-methods__description">
</p>
<section class="login-methods__options">
<a class="iconfont icon-weixin login-methods__icon--weixin" href="#">
</a>
<a class="iconfont icon-qq login-methods__icon--qq" href="#">
</a>
</section>
</div>
</div>
</div>
</body>
</html>
全局样式 global.css 中定义了基于 750px 设计图的 rem 换算规则,这是移动端开发的标准做法,能保证不同设备上的字体大小比例一致。
html {
font-size: calc(100 * 100vw / 750);
}
* {
margin: 0;
padding: 0;
color: #272636;
font-size: 0.24rem;
-webkit-tap-highlight-color: transparent;
}
重点在于 login1.css 中的动画定义。这里使用了 @keyframes 让背景图在多个坐标点之间平滑过渡,营造出一种呼吸感。
:root {
--main-color: #f2729a;
}
.login-page {
width: 100vw;
height: 100vh;
background: url('../img/bg1.jpg') no-repeat -300px -300px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
animation: bgGif 10s infinite alternate ease-in-out;
}
@keyframes bgGif {
0% { background-position: -800px -300px; }
25% { background-position: -1200px -600px; }
50% { background-position: -1600px -1000px; }
75% { background-position: -800px -1900px; }
100% { background-position: -2000px -300px; }
}
注意 background-position 的数值需要根据实际素材图片的尺寸调整,否则动画会出现断层。
仿幕布风格
第二种风格更偏向工具类 APP,强调简洁、高效。去掉了复杂的装饰,将重心放在输入体验上,比如验证码输入框右侧预留了发送按钮的位置。
效果预览
核心代码实现
HTML 结构上增加了 Logo 展示区域和协议勾选框,符合合规要求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login 02</title>
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/login2.css" />
</head>
<body>
<div class="login-page">
<div class="login-page__main">
<img class="login-logo" src="./img/yuntaotao.png" alt="Logo" />
<form action="">
<div class="login-page__form">
<section class="rel login-page__form-group">
<input class="login-page__form-group-input" name="tel" type="text" placeholder="输入手机号" />
</section>
<section class="rel login-page__form-group">
<input class="login-page__form-group-input" name="verCode" type="text" placeholder="验证码" />
<span class="abs login-page__form-group--sendcode-btn">发送验证码</span>
</section>
<section class="login-page__form-group login-page__guide">
<input type="checkbox" name="agree" value="agree" />
<span>我已阅读并同意 </span>
<a href="#">服务条款、隐私政策</a>
</section>
<div class="login-page__submit-btn">登录</div>
</div>
</form>
<div class="login-methods">
<section class="login-methods__options">
<a class="iconfont icon-weixin2 login-methods__icon--weixin" href="#"></a>
<a class="iconfont icon-more login-methods__icon--more" href="#"></a>
</section>
</div>
</div>
</div>
</body>
</html>
CSS 部分主要调整了间距和颜色变量,使整体视觉更统一。
:root {
--main-color: #4a00e0;
}
.login-page {
width: 100vw;
height: 100vh;
background-color: #fefefe;
display: flex;
align-items: center;
justify-content: center;
}
.login-logo {
width: 1.36rem;
margin: 0rem auto 1.5rem auto;
border: 3px solid var(--main-color);
border-radius: 50%;
}
验证码输入框使用了绝对定位来放置'发送验证码'按钮,这样既不影响输入框宽度,又能保证交互区域的紧凑性。
以上两套模板都可直接集成到项目中,根据业务需求替换图标和文案即可。
相关免费在线工具
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
- Markdown转HTML
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
- HTML转Markdown
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
- JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
- JSON美化和格式化
将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online