前端登录页面_登录页面代码-优快云博客

本文展示了如何使用HTML5和CSS3在Web前端构建一个具有流光动画效果的登录页面。通过HBuilder软件，作者详细解释了HTML结构和CSS样式，包括输入框验证、动画效果以及登录按钮的样式设计，最终实现了多色流动光线的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于使用HTML5+CSS3实现编写流光效果的Web前端登陆页面（多种颜色动画流光效果）

注：实现本次效果全程使用HBuilder软件进行操作和编写

效果图如下：

首先我们在html页面链入我们的css文件，在页面编写需要的文本框和点击按钮。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/new_file.css" />
	</head>
	<body>
		<div class="box">
			<span class="borderLine"></span>
			<form>
				<h2>登录</h2>
				<div class="inputBox">
					<input type="text" required="required" />
					<span>账号：</span><i></i>
				</div>
				<div class="inputBox">
					<input type="password" required="required" />
					<span>密码：</span><i></i>
				</div>
				<div class="links">
					<a href="#">忘记密码</a><a href="#">注册</a>
				</div>
				<input type="submit" value="登录">
			</form>
		</div>
	</body>
</html>

在我们的css文件中要进行底色的设置，代码如下：

/*设置底色*/
*{
	margin: 0;
	padding: 0;
	font-size: 黑体;
	box-sizing: border-box;
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #222;
}

设置登录盒子的大小和颜色

/*设置登录盒子的大小和底色*/
.box{
	position:relative;
	width: 380px;
	height: 420px;
	background: #1c1c1c;
	border-radius: 8px;
}

开启flex布局，换轴

/*开启flex布局，换轴*/
.box form{
	position:absolute;
	inset:4px;
	background: #222;
	padding: 50px 40px;
	border-radius: 8px;
	z-index: 2;
	display: flex;