后台账号密码登入模版 css3输入框动画

已测试 2021-01-25 本文共1810个字，预计耗時5分钟 1.02K次阅读

文章摘要：后台账号密码模板，输入框获取焦点具有CSS3动画，鼠标经过登录框动画效果，账号密码也做了一定限定必须为4-16位数字或者英文字母。预览截图：直接上源码： <!DOCTYPE html> <html lang="en"&...

后台账号密码模板，输入框获取焦点具有CSS3动画，鼠标经过登录框动画效果，账号密码也做了一定限定必须为4-16位数字或者英文字母。

预览截图：

直接上源码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3账号密码输入框动画模板 - 源码之家</title>
<style>
	*{margin: 0;padding: 0;}
	body {background-color: rgba(255, 251, 0, 0.336);}
	form {
		position: relative;
		margin: 300px auto;
		width: 400px;
		height: 250px;
		text-align: center;
		border: 1px solid #ccc;
		transition: all 0.5s;
		border-radius: 10px;
		background-color: rgba(247, 0, 255, 0.336);
	}
	form:hover {transform: translate(10px);box-shadow: 10px 10px 10px 0 rgb(7, 49, 235);}
	input {
		margin-top: 25px;
		width: 200px;
		height: 40px;
		border-radius: 10px;
		outline: none;
		text-indent: 1em;
		border: 1px solid #ccc;
	}
	button {
		margin: 40px 10px;
		width: 80px;
		height: 40px;
		border: none;
		color: #fff;
		background-color: rgba(168, 9, 9, 0.705);
		border-radius: 10px;
		outline: none;
	}
	.content {
		position: absolute;
		right: -250px;
		height: 40px;
		width: 260px;
		text-align: center;
		line-height: 40px;
		/* border:1px solid red; */
		background-color: #a56cca;
		border-radius: 5px;
		opacity: 0;
		transition: all 0.9s;
	}
	.content1 {top: 20px;}
	.content2 {top: 82px;}
	p {color: #fff;font-size: 14px;}
	i {
		position: absolute;
		left: -24px;
		top: 8px;
		display: inline-block;
		width: 0;
		height: 0;
		border: 12px solid transparent;
		border-right-color: #a56cca;
	}
	input:focus~div {right: -200px;opacity: 1;}
	.sub {
		margin: 40px;
		width: 80px;
		height: 40px;
		border: none;
		color: #fff;
		border-radius: 10px;
		outline: none;
		text-indent: 0;
		background-color: rgb(236, 8, 46);
	}
	.sub:hover {background-color: red;}
	button:hover {background-color: red;}
</style>
</head>
<body>
<form action="" method="post">
	<div>
		<b>账号：</b>
		<input type="text" placeholder="请输入账号" name="name" /><br />
		<div class="content content1">
			<i></i>
			<p>账号必须为4-16位数字或者英文字母</p>
		</div>
	</div>
	<div>
		<b>密码：</b>
		<input type="password" placeholder="请输入密码" name="pwd" />
		<div class="content content2">
			<i></i>
			<p>密码必须为4-16位数字或者英文字母</p>
		</div>
	</div>
	<input type="submit" value="登录" class="sub" /><button>注册</button>
</form>
</body>
</html>

本文地址：https://doc.ydqic.com/3597.html

版权免责申明
① 本站源码模板等资源SVIP用户永久不限量免费下载
② 所有资源来源于网络收集，如有侵权，请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流，请不要用于商业用途，否则后果自负。
④ 如果你有源码需要出售，可以联系管理详谈。
⑤ 本站提供的源码、模板、插件等等资源，都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内，为了大环境的良性发展，请尽可能的选择正版资源。
⑧ 网站资源绝不做任何二次加密或添加后门（原版加密除外）

常见问题F&Q