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

css的annimation以及box

    • 效果
    • 布局思想
      • 思想
      • html布局
    • body渐变
    • 登录div均分
    • 输入框样式
    • 整体代码

效果

布局思想

思想

登陆背景居中,动漫图片和输入框各占1/2,调整输入框的交互样式,避免违和感。
登录的框加上阴影,增加层次感。
背景加上渐变,画面显得灵动。
css_制作登录界面(渐变_简约)_第1张图片

html布局

<body>
	<div class="tiltle">login formdiv>
	<div class="container">
		<div class="left">
		div>
		<div class="right">
			<div class="formBox">
				<form>
					<p>usernamep>
					<input type="text" placeholder="请一键三连" />
					<p>passwordp>
					<input type="password" placeholder="请一键三连" />
					<input type="submit" value="login">
					<a href="#">forget passworda>
				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;
}

整体代码


<html>
	<head>
		<meta charset="utf-8">
		<title>logintitle>
	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 formh1>
		div>
		<div class="container">
			<div class="left">div>
			<div class="right">
				<div class="formBox">
					<form>
						<p>usernamep>
						<input type="text" name="" placeholder="name" />
						<p>passwordp>
						<input type="password" name="" placeholder="password" />
						<input type="submit" name="" value="sign" />
						<a href="#">forget passworda>
					form>

				div>

			div>
		div>
	body>
html>

你可能感兴趣的:(UI,学习笔记,css,html,登录界面)