【Java】多线程详解

2025–2026 年视角下，全网公认颜值天花板级别的登录/注册页面，通常集中在以下几种风格（按当前流行度排序）：

1. Neon Glow + 赛博朋克/未来感（最火、最吸睛）
2. 玻璃态 + 模糊背景（Glassmorphism） + 渐变
3. 极简 + 微动效 + 暗黑/莫兰迪色系
4. 3D 翻转 / 卡片切换（登录↔注册）
5. 粒子背景 / 波浪 / 光点动画

下面直接给你目前（2026年初）最值得收藏的几种顶级效果类型 + 代表性实现思路（CodePen / YouTube / GitHub 风格汇总），你可以直接复制改成自己的项目。

1. 最推荐（2025–2026 霸榜风格）：Neon Glow + 动态网格/光晕

特点：霓虹光边、悬浮感、背景动态网格/粒子、输入框发光、按钮呼吸灯

典型关键词：neon login 2025、glowing login form、cyberpunk sign in

核心 CSS 技巧：

• box-shadow 多层叠加发光
• filter: drop-shadow() + backdrop-filter: blur()
• @keyframes 做呼吸/流动光效
• background: linear-gradient() + background-size: 200% 200% 动画

<!-- 极简 HTML 结构 -->
<div class="container">
  <div class="form-box">
    <h2>Sign In</h2>
    <form>
      <div class="input-group">
        <input type="email" required placeholder="Email">
        <label>Email</label>
      </div>
      <div class="input-group">
        <input type="password" required placeholder="Password">
        <label>Password</label>
      </div>
      <button type="submit">Login</button>
      <p>Don't have an account? <a href="#" class="toggle">Sign Up</a></p>
    </form>
  </div>
</div>

/* 代表性 CSS（2025-2026 顶级霓虹风） */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  min-height: 100vh;
  background: #0d0d0d;
  font-family: 'Segoe UI', sans-serif;
  overflow: hidden;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffff);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.form-box {
  position: relative;
  width: 400px;
  padding: 40px;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 
    0 0 30px rgba(255,0,255,0.3),
    0 0 60px rgba(0,255,255,0.2),
    inset 0 0 20px rgba(255,255,255,0.05);
  transition: all 0.5s;
}

.form-box:hover { transform: translateY(-10px); }

.input-group {
  position: relative;
  margin: 30px 0;
}

input {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  color: white;
  font-size: 16px;
  transition: 0.5s;
}

input:focus { 
  outline: none; 
  border-bottom: 2px solid #00ffff; 
  box-shadow: 0 0 10px #00ffff80;
}

input:focus + label,
input:valid + label {
  top: -20px;
  font-size: 12px;
  color: #00ffff;
}

label {
  position: absolute;
  left: 0;
  padding: 12px 0;
  color: rgba(255,255,255,0.7);
  pointer-events: none;
  transition: 0.5s;
}

button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(45deg, #ff00cc, #00ffff);
  border: none;
  border-radius: 30px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
  transition: all 0.4s;
}

button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(0,255,255,0.8);
}

想要更炫：可以在背景加 canvas 粒子、SVG 波浪、或 WebGL 着色器（three.js 轻量版）。

2. 第二热门：双面翻转 / 左右滑动切换登录↔注册

• 经典 CodePen 风格：一个容器，点击切换时整个卡片 180° 翻转或左右平移
• 优点：交互感强，空间感好
• 缺点：手机端翻转容易眩晕（建议用平移代替）

核心 JS（切换类名）：

document.querySelector('.toggle').addEventListener('click', () => {
  document.querySelector('.form-box').classList.toggle('flipped');
});

CSS（翻转）：

.form-box {
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.form-box.flipped { transform: rotateY(180deg); }

3. 极简 + 玻璃态 + 渐变背景（很多大厂爱用）

• 模糊背景图 + 半透明白色/黑色卡片
• 输入框浮动 label
• 微妙的阴影 + 圆角 + 渐变按钮

快速收藏清单（2026 仍值得参考的地址）

• CodePen 搜索 “neon login” / “glassmorphism login” / “glowing input”
• YouTube 2025 教程：搜索 “Neon Grid Login 2025” 或 “Glowing Sign In Page 2025”
• Colorlib / FreeFrontend 的 2025–2026 更新合集（几十个高质量免费模板）
• GitHub sunyctf/login-demos（很多可爱/酷炫的中国风设计）

你更喜欢哪种风格？

• 霓虹赛博朋克
• 玻璃态 + 极简
• 3D 翻转卡片
• 带粒子/波浪背景的梦幻风
• 暗黑模式 + 莫兰迪色

告诉我偏好，我可以给你更针对性的完整代码（HTML+CSS+JS）。