時間:2023-07-26 14:24:01 | 來源:網(wǎng)站運營
時間:2023-07-26 14:24:01 來源:網(wǎng)站運營
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="">手機(jī):</label> <input type="text" placeholder="請輸入手機(jī)號碼"> </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;}/*表單標(biāo)題樣式*/.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;}/*姓名 手機(jī) 郵箱 備注框樣式*/.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;}
關(guān)鍵詞:簡約
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。