html + css炫酷表单

<div class="form">
    <form action="">
        <h1>信息登记</h1>
        <div class="txtb">
            <label for="">姓名:</label>
            <input type="text" placeholder="请输入姓名"></div>
        <div class="txtb">
            <label for="">邮箱:</label>
            <input type="email" placeholder="请输入邮箱"></div>
        <div class="txtb">
            <label for="">手机:</label>
            <input type="text" placeholder="请输入手机号码">
        </div>
        <div class="txtb">
            <label for="">备注:</label>
            <textarea name="" id=""></textarea>
        </div>
        <span class="btn">提交</span>
    </form>
</div>

* {
	margin:0;
	padding:0;
}
/*渐变背景样式*/
body {
	height:100vh;
	width:100%;
	overflow:hidden;
	background-image:linear-gradient(125deg,#F44336,#E91E63,#9C27B0,#3F51B5,#2196F3);
	background-size:400%;
	font-family:"montserrat";
	animation:bganimation 15s infinite;
}
@keyframes bganimation {
	0% {
	background-position:0% 50%;
}
50% {
	background-position:100% 50%;
}
100% {
	background-position:0% 50%;
}
}/*表单样式*/
.form {
	width:85%;
	max-width:600px;
	/* max-height:700px;
	*/
    background-color:rgba(255,255,255,.05);
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	padding:40px;
	border-radius:10px;
	box-shadow:0 0 5px #000;
	text-align:center;
	font-family:"微软雅黑";
	color:#fff;
}
/*表单标题样式*/
.form h1 {
	margin-top:0;
	font-weight:200;
}
.form .txtb {
	border:1px solid #aaa;
	margin:8px 0;
	padding:12px 18px;
	border-radius:10px;
}
.txtb label {
	display:block;
	text-align:left;
	color:#fff;
	font-size:14px;
}
/*姓名 手机 邮箱 备注框样式*/
.txtb input,.txtb textarea {
	width:100%;
	background:none;
	border:none;
	outline:none;
	margin-top:6px;
	font-size:18px;
	color:#fff;
}
/*备注框样式*/
.txtb textarea {
	max-height:300px;
}
/*提交按钮样式*/
.btn {
	display:block;
	/* background-color:rgba(156,39,176,.5);
	*/
    padding:14px 0;
	color:#fff;
	cursor:pointer;
	margin-top:8px;
	width:100%;
	border:1px solid #aaa;
	border-radius:10px;
}