时间：2023-07-26 14:24:01 | 来源：网站运营
时间：2023-07-26 14:24:01 来源：网站运营
html + css 做一个简约唯美炫酷表单：查看效果：http://songothao.gitee.io/web_simple_beautiful_cool_form
在线咨询
<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;}关键词：简约
