css布局一个卡片式登录表单页面效果代码-html代码-BFW代码库

css布局一个卡片式登录表单页面效果代码

代码语言：html

代码描述：css布局一个卡片式登录表单页面效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
	* {
	box-sizing:border-box;
	margin:0;
	padding:0;
	font-family:Raleway,sans-serif
}
body {
	background:linear-gradient(90deg,#C7C5F4,#776BCC)
}
.container {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh
}
.screen {
	background:linear-gradient(90deg,#5D54A4,#7C78B8);
	position:relative;
	height:600px;
	width:360px;
	box-shadow:0 0 24px #5C5696
}
.screen__content {
	z-index:1;
	position:relative;
	height:100%
}
.screen__background {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:0;
	-webkit-clip-path:inset(0 0 0 0);
	clip-path:inset(0 0 0 0)
}
.screen__background__shape {
	transform:rotate(45deg);
	position:absolute
}
.screen__background__shape1 {
	height:520px;
	width:520px;
	background:#FFF;
	top:-50px;
	right:120px;
	border-radius:0 72px 0 0
}
.screen__background__shape2 {
	height:220px;
	width:220px;
	background:#6C63AC;
	top:-172px;
	right:0;
	border-radius:32px
}
.screen__background__shape3 {
	height:540px;
	width:190px;
	background:linear-gradient(270deg,#5D54A4,#6A679E);
	top:-24px;
	right:0;
	border-radius:32px
}
.screen__background__shape4 {
	height:400px;
	width:200px;
	background:#7E7BB9;
	top:420px;
	right:50px;
	border-radius:60px
}
.login {
	width:320px;
	padding:30px;
	padding-top:156px
}
.login__field {
	padding:20px 0;
	position:relative
}
.login__icon {
	position:absolute;
	top:30px;
	color:#7875B5
}
.login__input {
	border:0;
	border-bottom:2px solid #D1D1D4;
	background:0;
	padding:10px;
	padding-left:24px;
	font-weight:700;
	width:75%;
	transition:.2s
}
.login__input:active,.login__input:focus,.login__input:hover {
	outline:0;
	border-bottom-color:#6A679E
}
.login__submit {
	background:#fff;
	font-size:14px;
	margin-top:30px;
	padding:16px 20px;
	border-radius:26px;
	border:1px solid #D4D3E8;
	text-transform:uppercase;
	font-weight:700;
	display:flex;
	align-items:center;
	width:100%;
	color:#4C489D;
	box-shadow:0 2px 2px #5C5696;
	cursor:pointer;
	transition:.2s
}
.login__submit:active,.login__submit:.........完整代码请登录后点击上方下载按钮下载查看