<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>炫酷登录页面</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(45deg, #0062ff, #00c6ff);font-family: 'Arial', sans-serif;}.login-container {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);padding: 40px;border-radius: 20px;box-shadow: 0 15px 35px rgba(0, 98, 255, 0.3);width: 400px;transform-style: preserve-3d;perspective: 1000px;animation: container-float 6s ease-in-out infinite;border: 1px solid rgba(255, 255, 255, 0.2);}@keyframes container-float {0%, 100% { transform: translateY(0px); }50% { transform: translateY(-20px); }}.login-container h2 {color: #fff;text-align: center;font-size: 2.5em;margin-bottom: 30px;text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);}.input-group {position: relative;margin-bottom: 30px;}.input-group input {width: 100%;padding: 15px;background: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);outline: none;border-radius: 10px;color: #fff;font-size: 1em;transition: 0.5s;}.input-group input:focus {border-color: #00c6ff;box-shadow: 0 0 15px rgba(0, 198, 255, 0.3);}.input-group label {position: absolute;left: 15px;top: 50%;transform: translateY(-50%);color: #fff;pointer-events: none;transition: 0.5s;}.input-group input:focus ~ label,.input-group input:valid ~ label {top: -10px;font-size: 0.8em;background: linear-gradient(45deg, #0062ff, #00c6ff);padding: 0 10px;border-radius: 5px;}.login-btn {width: 100%;padding: 15px;background: linear-gradient(45deg, #0062ff, #00c6ff);border: none;border-radius: 10px;color: #fff;font-size: 1.2em;cursor: pointer;transition: 0.5s;position: relative;overflow: hidden;}.login-btn:hover {transform: scale(1.05);box-shadow: 0 0 20px rgba(0, 198, 255, 0.5);}.login-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);transition: 0.5s;}.login-btn:hover::before {left: 100%;}.social-login {margin-top: 20px;text-align: center;}.social-login a {display: inline-block;width: 40px;height: 40px;background: rgba(255, 255, 255, 0.1);margin: 0 10px;border-radius: 50%;color: #fff;text-decoration: none;line-height: 40px;transition: 0.5s;border: 1px solid rgba(255, 255, 255, 0.2);}.social-login a:hover {transform: translateY(-5px);background: rgba(0, 198, 255, 0.3);box-shadow: 0 0 15px rgba(0, 198, 255, 0.5);}</style> </head> <body><div class="login-container"><h2>登录</h2><form><div class="input-group"><input type="text" required><label>用户名</label></div><div class="input-group"><input type="password" required><label>密码</label></div><button type="submit" class="login-btn">登录</button><div class="social-login"><a href="#" title="微信登录">微</a><a href="#" title="QQ登录">Q</a><a href="#" title="微博登录">微</a></div></form></div> </body> </html>
![[Windows] 数据恢复软件R-Studio 8.14.179623](https://attach.52pojie.cn/forum/202009/21/215839yppi5p3ifzxpyd7y.jpg)
