css3炫酷登录页面

1.效果示例

2.html代码

<form class="box" action="" method="post">
<h1>后台登陆</h1>
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="button" name="btn" value="登陆">
</form>

3.css代码

		body {
				margin: 0;
				padding: 0;
				font-family: sans-serif;
				background: #34495e;
			}

			.box {
				width: 300px;
				padding: 40px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: #191919;
				border-radius: 20px;
				opacity: 0.8;
			}

			.box h1 {
				color: white;
				text-transform: uppercase;
				font-weight: 500;
			}

			.box input[type='text'],
			.box input[type='password'] {
				border: 0;
				background: none;
				display: block;
				margin: 20px auto;
				text-align: center;
				border: 2px solid #3498db;
				padding: 14px 10px;
				width: 200px;
				outline: none;
				color: white;
				border-radius: 24px;
				transition: 0.25s;
			}

			.box input[type='text']:focus {
				width: 280px;
				border-color: #2ecc71;
			}

			.box input[type='password']:focus {
				width: 280px;
				border-color: #2ecc71;
			}

			.box input[type='button'] {
				border: 0;
				background: none;
				display: block;
				margin: 20px auto;
				text-align: center;
				border: 2px solid #2ECC71;
				padding: 14px 40px;
				outline: none;
				color: white;
				border-radius: 24px;
				transition: 0.25s;
				cursor: pointer;
			}

			.box input[type="button"]:hover {
				background: #2ecc71;
			}