css_制作登录界面(渐变_简约)-摩杜云开发者社区

css的annimation以及box

效果
布局思想

思想
html布局

body渐变
登录div均分
输入框样式
整体代码

效果

css_制作登录界面(渐变_简约)_html

布局思想

思想

登陆背景居中，动漫图片和输入框各占1/2，调整输入框的交互样式，避免违和感。

登录的框加上阴影，增加层次感。

背景加上渐变，画面显得灵动。

css_制作登录界面(渐变_简约)_html_02

html布局

<body>
	<div class="tiltle">login form</div>
	<div class="container">
		<div class="left">
		</div>
		<div class="right">
			<div class="formBox">
				<form>
					<p>username</p>
					<input type="text" placeholder="请一键三连" />
					<p>password</p>
					<input type="password" placeholder="请一键三连" />
					<input type="submit" value="login">
					<a href="#">forget password</a>
				</form>
			</div>
		</div>
	</div>
</body>

body渐变

推荐一个渐变色参考的网站：https://uigradients.com/

body {
	background: #5D4157;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #A8CABA, #5D4157);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #A8CABA, #5D4157);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background-size: 400%;
	animation: backdiv 12s infinite;
}

@keyframes backdiv {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

登录div均分

左侧使用一个动漫图片作为背景，右侧为输入框

margin: 0 auto;居中 box-shadow: 0 20px 16px rgba(0, 0, 0, 0.5);添加阴影

.container {
	width: 50%;
	height: 400px;
	margin: 0;
	padding: 0;
	background: #fff;
	margin: 0 auto;
	box-shadow: 0 20px 16px rgba(0, 0, 0, 0.5);
}

.container .left {
	float: left;
	width: 50%;
	height: 400px;
	background: url(./background/background.jpg);
	background-size: cover;
	box-sizing: border-box;
}

.container .right {
	float: right;
	width: 50%;
	height:400px;
	box-sizing: border-box;
}

输入框样式

box-sizing：border-box;规定在框内，避免跑出去

.formBox {
	width: 100%;
	background: #fff;
	padding: 80px 40px;
	box-sizing: border-box;
}

.formBox input {
	width: 100%;
	margin-bottom: 20px;
	font-weight: bold;
	color:#fff;
}

.formBox input[type="text"],
.formBox input[type="password"] {
	border: none;
	outline: none;
	width: 100%;
	margin-bottom: 20px;
	border-bottom: 2px solid #a6af14;
}

.formBox input[type="text"]:focus,
.formBox input[type="password"]:focus {
	border-bottom: 2px solid #000000;
}

.formBox input[type="submit"] {
	border: none;
	outline: none;
	
	background: #000000;
}

.formBox .p {
	font-weight: bold;
	color: #fff;
}
.formBox input[type="submit"]:hover {
	/* background: #fff; */
	background: #a6af14;
	cursor: pointer;
}
.formBox a{
	color: #000000;
}

整体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>login</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #5D4157;
			/* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #A8CABA, #5D4157);
			/* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #A8CABA, #5D4157);
			/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			animation: backdiv 12s infinite;
			background-position: 0% 50%;
			background-size: 400%;
		}

		@keyframes backdiv {
			0% {
				background-position: 0% 50%;
			}

			50% {
				background-position: 100% 50%;
			}

			100% {
				background-position: 0% 50%;
			}
		}

		.title {
			text-align: center;
			padding: 50px 0 20 px;
		}

		.title h1 {
			margin: 0;
			padding: 0;
			color: #fff;
			/* text-transform: uppercase; */
			font-size: 36px;
		}

		.container {
			width: 50%;
			height: 400px;
			margin: 0 auto;
			border: 2 px solid #fff;
			box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
		}

		.container .left {
			float: left;
			width: 50%;
			height: 400px;
			background: url(./img/background.jpg);
			background-size: cover;
			box-sizing: border-box;
		}

		.container .right {
			float: right;
			width: 50%;
			height: 400px;
			box-sizing: border-box;
			background: #fff;
		}

		.formBox {
			width: 100%;
			padding: 80px 40px;
			height: 400px;
			background: #fff;
			box-sizing: border-box;
			/* opacity: 0.6; */
		}

		.formBox .p {
			margin: 0;
			padding: 0;
			font-weight: bold;
			color: #a6af13;
		}

		.formBox input {
			width: 100%;
			margin-bottom: 20px;
		}

		.formBox input[type="text"] {
			border: none;
			border-bottom: 2px solid #a6af13;
			outline: none;
			height: 40px;
		}

		.formBox input[type="password"] {
			border: none;
			border-bottom: 2px solid #a6af13;
			outline: none;
			height: 40px;
		}

		.formBox input[type="text"]:focus {
			border-bottom: 2px solid #262626;
		}

		.formBox input[type="password"]:focus {
			border-bottom: 2px solid #262626;
		}

		.formBox input[type="submit"] {
			border: none;
			outline: none;
			height: 40px;
			color: #fff;
			background: #262626;
			cursor: pointer;
		}

		.formBox input[type="submit"]:hover {
			background: #a6af13;
		}

		.formBox a {
			font-weight: bold;
			color: #262626;
			font-size: 12px;
		}
	</style>
	<body>
		<div class="title">
			<h1>login form</h1>
		</div>
		<div class="container">
			<div class="left"></div>
			<div class="right">
				<div class="formBox">
					<form>
						<p>username</p>
						<input type="text" name="" placeholder="name" />
						<p>password</p>
						<input type="password" name="" placeholder="password" />
						<input type="submit" name="" value="sign" />
						<a href="#">forget password</a>
					</form>

				</div>

			</div>
		</div>
	</body>
</html>

css_制作登录界面(渐变_简约)_css_03