当前位置：首页 > news >正文

HTML+CSS 动态背景框动态登录注册框

news 来源：原创 2025/6/15 11:43:42

简介

本文展示了一个炫酷的登录页面设计，采用HTML和CSS实现。

页面具有以下特点：

动态圆形背景效果，由50个旋转的彩色线条构成；
居中显示的登录表单，包含邮箱、密码输入框和忘记密码链接；
输入框的浮动标签特效，当输入内容时标签会优雅地上移；
整体采用深色主题搭配青色(#0ef)高亮元素。

CSS动画和过渡效果增强了交互体验，实现了一个现代感十足的登录界面。

展示

在这里插入图片描述

代码

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"></meta><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head><body><div class="container"><div class="login-box"><h2>Login</h2><form action="#"><div class="input-box"><input type="email" required><label>Email</label></div><div class="input-box"><input type="password" required><label>Password</label></div><div class="forgot-pass"><a href="#">Forgot your Password?</a></div><button type="submit" class="btn">Login</button><div class="signup-link"><a href="#">Signup</a></div></form></div><span style="--i:0;"></span><span style="--i:1;"></span><span style="--i:2;"></span><span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span><span style="--i:7;"></span><span style="--i:8;"></span><span style="--i:9;"></span><span style="--i:10;"></span><span style="--i:11;"></span><span style="--i:12;"></span><span style="--i:13;"></span><span style="--i:14;"></span><span style="--i:15;"></span><span style="--i:16;"></span><span style="--i:17;"></span><span style="--i:18;"></span><span style="--i:19;"></span><span style="--i:20;"></span><span style="--i:21;"></span><span style="--i:22;"></span><span style="--i:23;"></span><span style="--i:24;"></span><span style="--i:25;"></span><span style="--i:26;"></span><span style="--i:27;"></span><span style="--i:28;"></span><span style="--i:29;"></span><span style="--i:30;"></span><span style="--i:31;"></span><span style="--i:32;"></span><span style="--i:33;"></span><span style="--i:34;"></span><span style="--i:35;"></span><span style="--i:36;"></span><span style="--i:37;"></span><span style="--i:38;"></span><span style="--i:39;"></span><span style="--i:40;"></span><span style="--i:41;"></span><span style="--i:42;"></span><span style="--i:43;"></span><span style="--i:44;"></span><span style="--i:45;"></span><span style="--i:46;"></span><span style="--i:47;"></span><span style="--i:48;"></span><span style="--i:49;"></span></div>
</body></html>

CSS

* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #1f293a;
}.container {position: relative;width: 256px;height: 256px;display: flex;justify-content: center;align-items: center;
}.container span {position: absolute;left: 0;width: 32px;height: 6px;background: #2c4766;border-radius: 8px;transform-origin: 128px;transform: scale(2.2) rotate(calc(var(--i)*(360deg/50)));animation: animateBlink 3s linear infinite;animation-delay: calc(var(--i)*(3s/50));
}
@keyframes animateBlink {0% {background:#0ef;}25% {background:#2c4766;}}.login-box {position: absolute;width: 400px;/* background: red; */
}.login-box form {width: 100%;padding: 0 50px;
}h2 {font-size: 2em;color: #0ef;text-align: center;
}.input-box {position: relative;margin: 25px 0;
}.input-box input {width: 100%;height: 50px;background: transparent;border: 2px solid #2c4766;outline: none;border-radius: 40px;transition: 0.5s ease;font-size: 1em;color: #fff;padding: 0 20px;}.input-box input:focus,
.input-box input:valid {border-color: #0ef;
}.input-box label {position: absolute;top: 50%;left: 20px;transform: translateY(-50%);font-size: 1em;color: #fff;pointer-events: none;transition: 0.5s ease;
}.input-box input:focus~label,
.input-box input:valid~label {top: 1px;font-size: 0.85em;background: #1f293a;padding: 0 6px;color: #0ef;
}.forgot-pass {margin: -15px 0 10px;text-align: center;
}.forgot-pass a {color: #fff;font-size: 0.85em;text-decoration: none;
}.forgot-pass a:hover {text-decoration: underline;
}.btn {width: 100%;height: 45px;background: #0ef;border: none;outline: none;border-radius: 40px;cursor: pointer;font-size: 1em;color: #1f293a;font-weight: 600;
}.signup-link {margin: 20px 0 10px;text-align: center;
}.signup-link a {color: #0ef;font-size: 1em;text-decoration: none;font-weight: 600;
}.signup-link a:hover {text-decoration: underline;
}