源碼下載:叁貳壹/WEB 簡約唯美炫酷表單

簡約唯美炫酷表單https://www.zhihu.com/video/1243887444052922368" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > html + css 做一個簡約唯美炫酷表單

html + css 做一個簡約唯美炫酷表單

時間: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

源碼下載:叁貳壹/WEB 簡約唯美炫酷表單

簡約唯美炫酷表單https://www.zhihu.com/video/1243887444052922368


html 代碼

<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>


在原來的基礎(chǔ)上寫的表單 叁貳壹:純 CSS 實現(xiàn)背景不停漸變效果

CSS 代碼

* { 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;}





CSDN:https://blog.csdn.net/weixin_43148062

簡書:https://www.jianshu.com/u/45339cbb7573





關(guān)鍵詞:簡約

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉