<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;
}
html + css炫酷表单
最新推荐文章于 2024-06-13 13:03:43 发布