html 注册表格

Posted 2021-05-11

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');

* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  font-family: 'Roboto Condensed', sans-serif;
}
.container {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(30,80,180,0.9);
  transition:background 200ms ease;
}
.container.error {
  background:tomato;
}
.container .title {
  position:absolute;
  top:-45px;
  width:100%;
  text-align:center;
  font-size:25px;
  color:rgba(242,242,242,1);
}
.bullets {
  height:50px;
  width:30px;
  margin-left:-40px;
  margin-right:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
}
.bullets span {
  display:block;
  width:8px;
  height:8px;
  background:rgba(240,240,240,0.4);
  border-radius:50%;
}
.bullets span.active {
  background:#fff;
}
.form {
  width:300px;
  height:50px;
  position:relative;
}
.form .row {
  
  width:100%;
  height:100%;
  position:absolute;
  display:none;
  transform-origin:top;
}
.form .row.visible {
  display:inline-block;  
}
.form .row.shown {
  animation:show 400ms ease forwards;
}
.form .row.hide {
  animation:hide 400ms ease forwards;
}
.form .row > * {
  display:block;
}
.form .row div.fa {
  position:absolute;
  top:0;
  left:10px;
  width:30px;
  height:50px;
  text-align:center;
  line-height:50px;
  font-size:20px;
  color:rgba(50,50,50,0.9);
  cursor:pointer;
}
.form .row input {
  width:100%;
  height:100%;
  padding-left:45px;
  border:none;
  outline:none;
  box-shadow:2px 6px 10px 5px rgba(20,20,20,0.5);
  font-size:17px;
}
.form .row.shake {
  transform-origin:center;
  animation:shake 300ms linear infinite; 
}
.form .row div.nextBtn {
  width:40px;
  height:50px;
  position:absolute;
  right:0;
  top:0px;
  text-align:center;
  line-height:50px;
  color:rgba(32,32,32,0.9);
  font-size:20px;
}
.spinner {
  -webkit-animation: rotator 1.4s linear infinite;
          animation: rotator 1.4s linear infinite;
}
.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
          animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
.success {
  text-align:center;
}
.success i {
  font-size:35px;
  color:rgba(40,130,70,0.9);
  width:60px;
  height:60px;
  text-align:center;
  line-height:60px;
  border:3px solid #e7e7e7;
  border-radius:50%;
}
.success h2 {
  color:rgba(30,30,30,0.9);
  font-weight:600;
  text-transform:uppercase;
  margin-top:15px;
  font-size:22px;
}



@keyframes show {
  0% {
    opacity:0.7;
    transform:translateY(40px) scale(0.6);
  }
  100% {
    opacity:1;
    transform:translateY(0px) scale(1);    
  }
}
@keyframes hide {
  0% {
    opacity:1;
    transform:translateY(0px) scale(1) rotateX(0px);
  }
  99% {
    opacity:0.9;
    transform:translateY(100px) scale(0.9) rotateX(-90deg);
  }
  100% {
    display:none;
    opacity:0;
  }
}
@keyframes shake {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}
@keyframes colors {
  0% {
    stroke: #4285F4;
  }
  25% {
    stroke: #DE3E35;
  }
  50% {
    stroke: #F7C223;
  }
  75% {
    stroke: #1B9A59;
  }
  100% {
    stroke: #4285F4;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$('.nextBtn').on('click',function(){
  var parentRef =  $(this).parent();
  var inputVal = parentRef.find('input').val();
  if(checkLength(inputVal,1)){
    add_remove_effects(parentRef,'shake');
    $('.container').addClass('error');
    return ;
  } else {
    if(checkLength(inputVal,4)){
      return ;
    }
  }
  if(!parentRef.hasClass('lastField')){
   parentRef.addClass('hide'); 
   parentRef.next().addClass('shown').addClass('visible');
   $('.bullets span.active').removeClass('active').next().addClass('active');
  } else {
    $('.container').css('background','#fff').html($('.spinnerWrapper').html());
    setTimeout(function(){
      $('.container').html('<div class="success"><i class="fa fa-check"></i><h2>Account Created</h2></div>');
    },4000);
  }
  $('.container').removeClass('error');
});

function checkLength(data,length){
  data = $.trim(data);
  if(data.length < length){
    return true;
  }
  return false;
}
var add_remove_effects = function(ref,classname){
  var $a = ref.addClass(classname);
  var $b = classname;
    setTimeout(function(){
      $a.removeClass($b);
    },450);     
}

Register Form 
--------------


A [Pen](https://codepen.io/harunpehlivan/pen/MQBWjX) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/MQBWjX/license).

<div class="container">
  <div class="bullets">
    <span class="active"></span>
    <span></span>
    <span></span>
  </div>
  <div class="form">
    <div class="title">
      Register
    </div>    
    <div class="row visible">
      <input type="text" placeholder="Username" />
      <div class="fa fa-user"></div>
      <div class="nextBtn"><i class="fa fa-chevron-down"></i></div>
    </div>
    <div class="row">
      <input type="email" placeholder="Email" />
      <div class="fa fa-envelope"></div>
      <div class="nextBtn"><i class="fa fa-chevron-down"></i></div>
    </div> 
    <div class="row lastField">
      <input type="password" placeholder="Password" />
      <div class="fa fa-key"></div>
      <div class="nextBtn"><i class="fa fa-chevron-down"></i></div>
    </div>     
  </div>
</div>
<div class="spinnerWrapper" style="display:none;">
  <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
     <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
  </svg>
</div>