HTML5 三步用户注册表单

注册时必要的信息为第一个表单，可选个人补充信息为第二个表单，第三个表单提示注册成功或失败。这3个表单之间有转场动画以及回退链接。

register

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3574
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

jQuery(document).ready(function(){
  function doStep(){
    // Next Button
    $('a.next-step').click(function(event){
      event.preventDefault();
      // Part 1
      if($('.alpha').hasClass("in")) {
        $('.alpha').removeClass("in");
      }
      $('.alpha').addClass("out");
      // Part 2
      if($('.beta').hasClass("out")) {
        $('.beta').removeClass("out");
      }
      $('.beta').addClass("in");
    });
    
    // Previous Button
    $('a.prev-step').click(function(event){
      event.preventDefault(); 
      $('.alpha').removeClass("out").addClass("in");
      $('.beta').removeClass("in").addClass("out");
    });
    
    // Submit & Complete
    $('.submit').click(function(event){
      event.preventDefault();
      // Part 1
      if($('.beta').hasClass("in")) {
        $('.beta').removeClass("in");
      }
      $('.beta').addClass("out");
      // Part 2
      if($('.charlie').hasClass("out")) {
        $('.charlie').removeClass("out");
      }
      $('.charlie').addClass("in");
    });
  }
  // Active Functions
  doStep();
});

编译

CSS

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  background-image: url("hexabump.png");
  font-size: 16px;
}

body {
  padding: 25px;
  z-index: -1;
}
body::before {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  height: 8px;
  opacity: 1;
  z-index: 0;
  background: #31dddb;
  box-shadow: 0 9px 0 rgba(255, 255, 255, 0.1);
}

.container {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  min-width: 300px;
}

h3 {
  color: #fff;
  font-size: 2em;
  font-weight: bold;
  font-family: "Lato", sans-serif;
  text-shadow: 0 0 10px #000;
  text-align: center;
}

p {
  color: #555;
  clear: both;
}

form {
  float: left;
  display: block;
  width: 100%;
  position: relative;
}
form fieldset {
  float: left;
  position: absolute;
  width: 100%;
  padding: 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
  background: #fff;
  background: whitesmoke;
  background: -webkit-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);
  background: -moz-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);
  background: -o-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);
  background: linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);
  /* W3C */
}
form fieldset legend {
  float: left;
  display: block;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #dfdfdf;
  top: 0;
  left: 0;
  clear: both;
  margin-bottom: 20px;
  padding-bottom: 10px;
  line-height: 30px;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}
form fieldset.beta, form fieldset.charlie {
  display: none;
}
form fieldset .frow {
  float: left;
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
form fieldset .frow:last-child {
  margin-bottom: 0px;
}
form fieldset input {
  float: left;
  width: 100%;
  padding: 12px 6px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  border: 1px solid #dedede;
  border-radius: 5px;
  box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;
  -webkit-transition: all 0.2s ease-in-out;
}
form fieldset input::-webkit-input-placeholder {
  color: #ccc;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out;
}
form fieldset input:focus {
  outline: none;
  border: 1px solid #27c1bf;
  box-shadow: 0 0 10px #27c1bf;
  -webkit-transition: all 0.2s ease-in-out;
}
form fieldset input:focus::-webkit-input-placeholder {
  opacity: 0.5;
}
form fieldset a.next-step,
form fieldset a.prev-step,
form fieldset input[type="submit"] {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0;
  background: #31dddb;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  font-size: 1.2em;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
  color: #fff;
  border: 1px solid #27c1bf;
  border-radius: 4px;
  box-shadow: 0 0 0 transparent;
}
form fieldset a.prev-step {
  background: #4a76a8;
  border: 1px solid #1d5b90;
}

.out, .alpha.out, .beta.out {
  z-index: 0;
  opacity: 1;
  display: block;
  -webkit-animation: out 0.75s ease forwards;
  -moz-animation: out 0.75s ease forwards;
  -o-animation: out 0.75s ease forwards;
  animation: out 0.75s ease forwards;
}

@-webkit-keyframes out {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }

25% {
    -webkit-transform: scale(1.05);
  }

99% {
    -webkit-transform: scale(0.8);
  }

100% {
    opacity: 0;
    display: none;
  }
}
@-moz-keyframes out {
  0% {
    -moz-transform: scale(1);
    opacity: 1;
  }

25% {
    -moz-transform: scale(1.05);
  }

99% {
    -moz-transform: scale(0.8);
  }

100% {
    opacity: 0;
    display: none;
  }
}
@-o-keyframes out {
  0% {
    -o-transform: scale(1);
    opacity: 1;
  }

25% {
    -o-transform: scale(1.05);
  }

99% {
    -o-transform: scale(0.8);
  }

100% {
    opacity: 0;
    display: none;
  }
}
@keyframes out {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

25% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

99% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

100% {
    opacity: 0;
    display: none;
  }
}
.in, .beta.in {
  z-index: 30;
  display: block;
  opacity: 0;
  -webkit-animation: in 0.75s ease forwards 0.25s;
  -moz-animation: in 0.75s ease forwards 0.25s;
  -o-animation: in 0.75s ease forwards 0.25s;
  animation: in 0.75s ease forwards 0.25s;
}

@-webkit-keyframes in {
  0% {
    -webkit-transform: translate3d(150px, 0, 0);
    opacity: 0;
  }

100% {
    -webkit-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes in {
  0% {
    -moz-transform: translate3d(150px, 0, 0);
    opacity: 0;
  }

100% {
    -moz-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@-o-keyframes in {
  0% {
    -o-transform: translate3d(150px, 0, 0);
    opacity: 0;
  }

100% {
    -o-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@keyframes in {
  0% {
    -webkit-transform: translate3d(150px, 0, 0);
    -moz-transform: translate3d(150px, 0, 0);
    -o-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0);
    opacity: 0;
  }

100% {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
.alpha.in {
  z-index: 30;
  display: block;
  opacity: 0;
  -webkit-animation: in-prev 0.75s ease forwards 0.25s;
  -moz-animation: in-prev 0.75s ease forwards 0.25s;
  -o-animation: in-prev 0.75s ease forwards 0.25s;
  animation: in-prev 0.75s ease forwards 0.25s;
}

@-webkit-keyframes in-prev {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
    opacity: 0;
  }

100% {
    -webkit-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes in-prev {
  0% {
    -moz-transform: translate3d(-150px, 0, 0);
    opacity: 0;
  }

100% {
    -moz-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@-o-keyframes in-prev {
  0% {
    -o-transform: translate3d(-150px, 0, 0);
    opacity: 0;
  }

100% {
    -o-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
@keyframes in-prev {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
    -moz-transform: translate3d(-150px, 0, 0);
    -o-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0);
    opacity: 0;
  }

100% {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}
.charlie.in {
  z-index: 30;
  display: block;
  opacity: 0;
  -webkit-animation: in-charlie 0.75s ease-out forwards 0.25s;
  -moz-animation: in-charlie 0.75s ease-out forwards 0.25s;
  -o-animation: in-charlie 0.75s ease-out forwards 0.25s;
  animation: in-charlie 0.75s ease-out forwards 0.25s;
}

@-webkit-keyframes in-charlie {
  0% {
    -webkit-transform: translate3d(0, 150px, 0);
    opacity: 0;
  }

100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes in-charlie {
  0% {
    -moz-transform: translate3d(0, 150px, 0);
    opacity: 0;
  }

100% {
    -moz-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-o-keyframes in-charlie {
  0% {
    -o-transform: translate3d(0, 150px, 0);
    opacity: 0;
  }

100% {
    -o-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes in-charlie {
  0% {
    -webkit-transform: translate3d(0, 150px, 0);
    -moz-transform: translate3d(0, 150px, 0);
    -o-transform: translate3d(0, 150px, 0);
    transform: translate3d(0, 150px, 0);
    opacity: 0;
  }

100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

HTML

<section class='container'>
  
  <form>
    
    
    
    <fieldset class='alpha'>
      <legend><b>1.</b> Your Info</legend>
      <div class='frow'>
        <input class='item' placeholder='Username' type='text'>
      </div>
      <div class='frow'>
        <input class='item' placeholder='Email' type='email'>
      </div>
      <div class='frow'>
        <input class='item' placeholder='Password' type='password'>
      </div>
      <div class='frow'>
        <a class='next-step' href='#'>Let's go!</a>
      </div>
    </fieldset>
    
    <fieldset class='beta'>
      <legend><b>2.</b>Your Social Profiles</legend>
      <div class='frow'>
        <input class='item' placeholder='CodePen' required='required' type='url'>
      </div>
      <div class='frow'>
        <input class='item' placeholder='Dribbble' required='required' type='url'>
      </div>
      <div class='frow'>
        <input class='item' placeholder='Behance' required='required' type='url'>
      </div>
      <div class='frow'>
        <a class='prev-step' href='#'>Go back!</a>
      </div>
      <div class='frow'>
        <input class='submit' type='submit' value="I'm all done!">
      </div>
    </fieldset>
    
    <fieldset class='charlie'>
      <legend><b>3.</b>Your All Done</legend>
      <div class='frow'>
        <p>Thanks</p>
      </div>
    </fieldset>
  </form>
</section>

注册时必要的信息为第一个表单，可选个人补充信息为第二个表单，第三个表单提示注册成功或失败。这3个表单之间有转场动画以及回退链接。

register

编辑器支持Emmet

快捷键

注册时必要的信息为第一个表单，可选个人补充信息为第二个表单，第三个表单提示注册成功或失败。这3个表单之间有转场动画以及回退链接。

register

HTML5一款小清新风格的登录/注册表单界面模板

一款书本展开式用户注册表单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：