先上效果
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cool Login Page</title> <style> /* 基本样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #ff7e5f, #feb47b); overflow: hidden; } /* 登录容器 */ .login-container { position: relative; width: 350px; padding: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); animation: slideIn 1s ease-out; } /* 表单标题 */ .login-form h2 { text-align: center; margin-bottom: 20px; color: white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } /* 输入组 */ .input-group { position: relative; margin-bottom: 30px; } .input-group input { width: 100%; padding: 10px; background: transparent; border: none; border-bottom: 2px solid white; color: white; font-size: 16px; transition: all 0.3s ease; } .input-group input:focus { outline: none; border-bottom: 2px solid #feb47b; } .input-group label { position: absolute; top: 10px; left: 0; pointer-events: none; transition: all 0.3s ease; color: rgba(255, 255, 255, 0.7); } .input-group input:focus + label, .input-group input:valid + label { top: -20px; font-size: 12px; color: #feb47b; } /* 登录按钮 */ .login-button { width: 100%; padding: 10px; background: linear-gradient(135deg, #ff7e5f, #feb47b); border: none; border-radius: 25px; color: white; font-size: 18px; cursor: pointer; transition: all 0.3s ease; } .login-button:hover { transform: scale(1.05); background: linear-gradient(135deg, #feb47b, #ff7e5f); } /* 动画效果 */ @keyframes slideIn { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* 冒泡效果 */ .bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .bubbles::before, .bubbles::after { content: ''; position: absolute; bottom: -100px; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); animation: bubble 20s infinite linear; } .bubbles::before { left: 10%; animation-duration: 15s; animation-delay: 0s; transform: scale(0.5); } .bubbles::after { left: 70%; animation-duration: 18s; animation-delay: 3s; transform: scale(0.8); } @keyframes bubble { 0% { transform: translateY(0) scale(1); opacity: 0; } 50% { opacity: 0.7; } 100% { transform: translateY(-1200px) scale(1.5); opacity: 0; } } </style> </head> <body> <div class="login-container"> <form class="login-form"> <h2>Login</h2> <div class="input-group"> <input type="text" required> <label>Username</label> </div> <div class="input-group"> <input type="password" required> <label>Password</label> </div> <button type="submit" class="login-button">Login</button> </form> </div> </body> </html>
解析
- 背景渐变: 使用
linear-gradient创建一个从橙色到粉色的背景渐变，为页面提供了一个明亮的背景。 - 登录容器: 半透明的背景和
backdrop-filter: blur(10px)效果让容器看起来更加优雅，box-shadow提供了一个轻微的阴影效果。使用slideIn动画实现页面加载时的下滑效果。 - 输入组: 输入框的样式简洁，并且在获得焦点时变换边框颜色，同时标签位置上移。
- 登录按钮: 按钮采用渐变背景，并且在悬停时略微放大，并且渐变方向反转，增加视觉动感。
