css实现简洁登录表单页面效果代码-html代码-BFW代码库

css实现简洁登录表单页面效果代码

代码语言：html

代码描述：css实现简洁登录表单页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
	-webkit-box-sizing:inherit;
	box-sizing:inherit
}
html {
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
body {
	background-color:#c0c0c0;
	font-family:'Varela Round',sans-serif;
	line-height:1.5;
	margin:0;
	min-height:100vh;
	padding:5vmin;
}
h2 {
	font-size:1.75rem
}
input {
	background-image:none;
	border:0;
	font:inherit;
	margin:0;
	padding:0;
	-webkit-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s
}
svg {
	height:auto;
	max-width:100%;
	vertical-align:middle
}
.align {
	display:grid;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	justify-items:center;
	place-items:center
}
.button {
	background-color:#3c7;
	color:#fff;
	padding:.25em 1.5em
}
.button:focus,.button:hover {
	background-color:#28ad63
}
.icons {
	display:none
}
.icon {
	fill:currentcolor;
	display:inline-block;
	height:1em;
	width:1em
}
.login {
	width:400px
}
.login__header {
	background-color:#f95252;
	border-top-left-radius:1.25em;
	border-top-right-radius:1.25em;
	color:#fff;
	padding:0.25em 1.625em
}
.login__header:first-child {
	margin-top:0
}
.login__header:last-child {
	margin-bottom:0
}
.login h2 .icon {
	margin-right:14px
}
.login__form {
	background-color:#fff;
	border-bottom-left-radius:1.25em;
	border-bottom-right-radius:1.25em;
	color:#777;
	display:grid;
	grid-gap:.875em;
	gap:.875em;
	padding:1.25em 1.625em
}
.login input {
	border-radius:.1875em
}
.login input[type="email"],.login input[type=".........完整代码请登录后点击上方下载按钮下载查看