专栏首页蚂蚁开源社区分步式用户注册表单UI界面代码解析/附源码下载

分步式用户注册表单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="qq" placeholder="腾讯QQ" /> <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来制作过渡动画效果。具体的代码请参考下载文件。

源码演示/下载请点击阅读原文

↓↓↓↓↓

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:思齐大神

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【UI特效】CSS3图片模糊切换效果

    今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用CSS3实现图片模糊效果也非常简单,用CSS3中的...

    用户5997198
  • CSS3图片模糊切换效果

    今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用CSS3实现图片模糊效果也非常简单,用CSS3中的...

    用户5997198
  • 【前端艺术】CSS3图片鼠标悬停动画特效代码

    该代码实现CSS3图片鼠标悬停动画特效。鼠标/手指悬停到图片上面的时候,利用CSS3制作上下关门的动画效果,非常炫酷。

    用户5997198
  • 正则表达式——表单验证

    王凡汎
  • 微信小程序环境下将文件上传到 OSS

    步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息。OSS 对带有 Origin...

    达达前端
  • 原生JS实现目录滚动特效

    分享一个用原生JS实现的文字滚动效果,这种效果通常用在网页中一些局部展示信息,如新闻、动态、充值记录等,效果如下:

    越陌度阡
  • 使用Excel&Python&Hive&SparkSQL进行数据分析开篇-环境搭建攻略!

    计划写一个新系列,分别使用Excel、Python、Hive、SparkSQL四种方式来实现简单的数据分析功能,例如GroupBy、透视表等功能。

    石晓文
  • 使用Excel&Python&Hive&SparkSQL进行数据分析开篇-环境搭建攻略!

    计划写一个新系列,分别使用Excel、Python、Hive、SparkSQL四种方式来实现简单的数据分析功能,例如GroupBy、透视表等功能。

    Python数据科学
  • Docker(3)- Centos 7.x 下 Docker 镜像加速配置

    https://www.cnblogs.com/poloyy/category/1870863.html

    小菠萝测试笔记
  • 开始 Flutter 实战项目-女装大佬

    《Flutter 入门指南》差不多就到了要完结说再见的时候了,这两天在家里想了想要做一个什么样的项目来练一下手,顺便也为 Flutter 学习小组交出一份合理的...

    icepy

扫码关注云+社区

领取腾讯云代金券