分步式用户注册表单UI界面代码解析/附源码下载 这是一款效果非常酷的分步式用户注册表单UI界面设计效果。在这个设计中简单的将用户注册分为3个步骤，用户填写完每一个步骤的信息后可以“下一步”按钮跳转到下一个步骤，也可以通过“前一步”按钮来查看前面的填写内容。在切换步骤的时候还带有非常炫酷的过渡动画效果。
制作方法 HTML结构 该分步式注册表单使用的HTML结构就是一个普通的<form>表单素。每一个注册步骤都使用一个<fieldset>素来包裹。 <form id=”msform”> <!– progressbar –> <ul id=”progressbar”> <li class=”active”>账号设置</li> <li>社交账号</li> <li>个人详细信息</li> </ul> <!– fieldsets –> <fieldset> <h2 class=”fs-title”>创建你的账号</h2> <h3 class=”fs-subtitle”>这是第一步</h3> <input type=”text” name=”email” placeholder=”Email地址” /> <input type=”password” name=”pass” placeholder=”密码” /> <input type=”password” name=”cpass” placeholder=”重复密码” /> <input type=”button” name=”next” class=”next action-button” value=”Next” /> </fieldset> <fieldset> <h2 class=”fs-title”>填写社交账号</h2> <h3 class=”fs-subtitle”>填写你的常用社交网络账号</h3> <input type=”text” name=”x-weibo” placeholder=”新浪微博” /> <input type=”text” name=”t-weibo” placeholder=”腾讯微博” /> <input type=”text” name=”sigusoft” placeholder=”腾讯sigusoft” /> <input type=”button” name=”previous” class=”previous action-button” value=”Previous” /> <input type=”button” name=”next” class=”next action-button” value=”Next” /> </fieldset> <fieldset> <h2 class=”fs-title”>个人详细信息</h2> <h3 class=”fs-subtitle”>个人详细信息是保密的，不会被泄露</h3> <input type=”text” name=”fname” placeholder=”昵称” /> <input type=”text” name=”lname” placeholder=”姓名” /> <input type=”text” name=”phone” placeholder=”电话号码” /> <textarea name=”address” placeholder=”家庭住址”></textarea> <input type=”button” name=”previous” class=”previous action-button” value=”Previous” /> <input type=”submit” name=”submit” class=”submit action-button” value=”Submit” /> </fieldset> </form> CSS样式 该分步式用户注册表单的CSS样式非常简单。首先是input素和按钮都被简单的进行了一些美化： /*inputs*/ #msform input, #msform textarea { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 100%; box-sizing: border-box; font-family: “Microsoft YaHei”,montserrat; color: #2C3E50; font-size: 13px; } /*buttons*/ #msform .action-button { width: 100px; background: #27AE60; font-weight: bold; color: white; border: 0 none; border-radius: 1px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } #msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; } 表单顶部的导航进度条的颜色显示效果使用了CSS3的counter()函数来统计步骤，根据相应的步骤填充进度条的颜色。 #progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: white; text-transform: uppercase; font-size: 9px; width: 33.33%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; } 进度条本身使用的是无序列表li素的:after伪素来制作。由于第一个素是不需要前面的进度条的，所以设置通过#progressbar li:first-child:after的content为none来取消它。 #progressbar li:after { content: ”; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/ } #progressbar li:first-child:after { content: none; } 当进度条处于激活状态时（当前步骤），进度条被设置为绿底白字。 #progressbar li.active:before, #progressbar li.active:after{ background: #27AE60; color: white; } JAVASCRIPT 在jQuery代码中，主要是处理“前一步”和“下一步”按钮的事件。该设计中使用jquery.easing.js来制作过渡动画效果。具体的代码请参考下载文件。 源码演示/下载请阅读原文 ↓↓↓↓↓
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/80107.html
![Navicat Premium 16.3.9激活([编程]Navicat Premium(数据库管理工具)中文版v16.3.9.0_免安装解压即用)](https://sigusoft.com/wp-content/uploads/2024/08/EHqCh0pf-480x300.png "Navicat Premium 16.3.9激活([编程]Navicat Premium(数据库管理工具)中文版v16.3.9.0_免安装解压即用)缩略图")
