移动端高颜值登录页实战：动态背景与仿幕布风格 | 极客日志

HTML / CSSWeChat大前端

移动端高颜值登录页实战：动态背景与仿幕布风格

分享两款移动端高颜值登录页模板，分别包含动态背景视觉流与仿幕布极简风格。内容涵盖 HTML 结构搭建、基于 750px 设计图的 rem 适配方案、CSS 背景动画关键帧设置以及表单交互细节。代码经过清理，可直接用于前端项目，帮助快速构建美观且合规的登录界面。

Qiny01发布于 2025/2/5更新于 2026/4/242 浏览

移动端高颜值登录页实战：动态背景与仿幕布风格

移动端高颜值登录页实战

昨天分享了一波纯 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 =>
      
        登录
        
        
          
            
              
              
            
            
              
              
            
            
              忘记密码？
              没有账号，去注册
            
            登录
          
        
        
        
          —其他方式登录—

html {
  /* 750px 的设计图，1rem = 100px */
  font-size: calc(100 * 100vw / 750);
}

* {
  margin: 0;
  padding: 0;
  color: #272636;
  font-size: 0.24rem;
  -webkit-tap-highlight-color: transparent;
}
/* ... 省略部分通用重置代码 ... */

: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; }
}

/* 表单及按钮样式略 */

<!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>我已阅读并同意&nbsp;</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>

: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%;
}

/* 输入框与按钮样式略 */