用 CSS 做一个“卡片式登录框 + 浮动光晕”示例

用 CSS 做一个“卡片式登录框 + 浮动光晕”示例（含代码）

做一个常见但很实用的登录卡片（Login Card），重点放在 布局、层次、输入框交互、以及柔和的背景光晕。依然是纯前端示例，不依赖框架，你复制到任意页面就能跑起来。

✅ HTML（结构示例）

<div class="auth-wrap">
  <div class="glow glow-a"></div>
  <div class="glow glow-b"></div>


<div class="auth-card">
    <h1 class="auth-title">Welcome Back</h1>
    <p class="auth-subtitle">Use your admin account to continue.</p>


<form class="auth-form">
  <label class="field">
    <span class="label">Email</span>
    <input type="email" placeholder="you@example.com" />
  </label>

  <label class="field">
    <span class="label">Password</span>
    <input type="password" placeholder="••••••••" />
  </label>

  <div class="row">
    <label class="check">
      <input type="checkbox" />
      <span>Remember me</span>
    </label>
    <a>Forgot?</a>
  </div>

  <button class="btn" type="button">Sign in</button>

  <p class="hint">
    Tip: keep the card width small on desktop, it reads better.
  </p>
</form>




</div>
</div>

✅ CSS（核心样式 + 交互）

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: #0b1220;
  color: #e9eefc;
}


/ 外层容器：居中 + 背景 /
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  position: relative;
  overflow: hidden;
}


/ 背景光晕（浮动渐变） /
.glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.45;
  pointer-events: none;
  transform: translateZ(0);
}


.glow-a {
  background: radial-gradient(circle at 30% 30%, #7c3aed, transparent 60%);
  top: -180px;
  left: -180px;
}


.glow-b {
  background: radial-gradient(circle at 70% 60%, #22d3ee, transparent 60%);
  bottom: -200px;
  right: -200px;
}


/ 登录卡片 /
.auth-card {
  width: min(420px, 92vw);
  padding: 22px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}


/ 标题区 /
.auth-title {
  margin: 0 0 6px 0;
  font-size: 22px;
  letter-spacing: 0.2px;
}


.auth-subtitle {
  margin: 0 0 18px 0;
  font-size: 13px;
  opacity: 0.78;
}


/ 表单布局 /
.auth-form { display: grid; gap: 12px; }


.field { display: grid; gap: 6px; }


.label {
  font-size: 12px;
  opacity: 0.75;
}


/ 输入框交互：focus 高亮 + 内阴影 /
.field input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10, 16, 30, 0.55);
  color: #e9eefc;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}


.field input::placeholder {
  color: rgba(233, 238, 252, 0.45);
}


.field input:focus {
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14);
  transform: translateY(-1px);
}


/ 行布局 /
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}


.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  opacity: 0.85;
}


.check input {
  width: 16px;
  height: 16px;
  accent-color: #22d3ee;
}


.link {
  font-size: 13px;
  color: rgba(233, 238, 252, 0.85);
  text-decoration: none;
  border-bottom: 1px dashed rgba(233, 238, 252, 0.35);
  padding-bottom: 1px;
}


.link:hover {
  border-bottom-color: rgba(233, 238, 252, 0.75);
}


/ 主按钮：渐变 + 轻微上浮 /
.btn {
  margin-top: 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #07111f;
  background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
  transition: transform .18s ease, filter .18s ease;
}


.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}


.btn:active {
  transform: translateY(0px);
  filter: brightness(0.98);
}


/ 小提示 /
.hint {
  margin: 6px 0 0 0;
  font-size: 12px;
  opacity: 0.65;
  line-height: 1.35;
}


/ 移动端：减少留白，避免显得拥挤 /
@media (max-width: 480px) {
  .auth-card { padding: 18px 16px; border-radius: 16px; }
  .auth-title { font-size: 20px; }
}

✅ 使用建议（更像真实项目）

  • 如果你要接 WordPress 登录页，可以把 .auth-card 的结构包在你自己的模板里（或 Elementor HTML 小工具）。
  • 如果你希望“忘记密码”真的跳转，替换 href="javascript:void(0)" 为你的实际路径即可（注意你如果不想出现外链，就保持空链接或用站内路径）。
ForrestadBashar@gmail.com

评论 0