LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import "//fonts.googleapis.com/css?family=Open+Sans:300";
html,
body {
  height: 100%;
  background-color: #29313A;
  color: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
body #root {
  position: relative;
  width: 20%;
}
@media only screen and (max-width: 425px) {
  body #root {
    width: 90%;
  }
}
body #root > div {
  width: 0;
  -webkit-animation: grow 1s ease forwards;
          animation: grow 1s ease forwards;
}

@-webkit-keyframes grow {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes grow {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
input[type=text] {
  font-family: 'Open Sans', sans-serif;
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-size: 20px;
  font-weight: 100;
  outline: none;
  height: 48px;
  width: 100%;
  padding: 0;
  box-shadow: none;
  box-sizing: content-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  border-bottom: 3px solid #FFFFFF;
  color: #FFFFFF;
  -webkit-transition: border-bottom 0.2s ease-in;
  transition: border-bottom 0.2s ease-in;
}
input[type=text].invalid {
  border-bottom: 3px solid #FE4D69;
}

label {
  color: #9399A0;
  position: absolute;
  top: 0.8rem;
  left: 0rem;
  font-size: 20px;
  letter-spacing: -1px;
  cursor: text;
  opacity: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: type 1s steps(60, end) 1s forwards, undercase 0.3s ease 2s forwards;
          animation: type 1s steps(60, end) 1s forwards, undercase 0.3s ease 2s forwards;
}

@-webkit-keyframes type {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

@keyframes type {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes undercase {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 250%, 0);
            transform: translate3d(0, 250%, 0);
    font-size: 12px;
    letter-spacing: initial;
    opacity: 1;
  }
}
@keyframes undercase {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 250%, 0);
            transform: translate3d(0, 250%, 0);
    font-size: 12px;
    letter-spacing: initial;
    opacity: 1;
  }
}
.icon {
  position: absolute;
  right: 0;
  min-height: 40px;
  min-width: 40px;
  width: 40px;
  height: 40px;
}
.icon > span {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  overflow: hidden;
}
.icon > span > span {
  display: block;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.cross > span {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.cross > span > span {
  background-color: #FE4D69;
  -webkit-transform: scale(1, 0.05);
          transform: scale(1, 0.05);
}
.cross > span > span.s3 {
  background-color: #FE4D69;
  -webkit-transform: scale(0.05, 1);
          transform: scale(0.05, 1);
}

.check > span > span {
  background-color: #62D474;
  width: 16px;
  height: 1.6px;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transform: translate(-4.8px, 30px) rotate(45deg);
          transform: translate(-4.8px, 30px) rotate(45deg);
}
.check > span > span.s3 {
  background-color: #62D474;
  width: 28.8px;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: translate(14.4px, 30px) rotate(-45deg);
          transform: translate(14.4px, 30px) rotate(-45deg);
}
JS
const root = document.getElementById('root');
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

class EmailInput extends React.Component {
  state = {
    valid: null
  };
  validate() {
    this.refs.email.value ? this.setState({
      valid: emailRegex.test(this.refs.email.value)
    }) : this.setState({
      valid: null
    })
  }
  render() {
    const inputClass = classNames({
      'invalid': !this.state.valid && this.state.valid !== null
    })
    const iconClass = classNames({
      'icon': true,
      'check': this.state.valid,
      'cross': !this.state.valid && this.state.valid !== null
    })
    return (
      
{this.validate()}} />
) } } ReactDOM.render( , root );

Description

This is based on Mamun Srizon's 'Input Filed Micro Interaction'. The type caret animation is the only thing missing D:
Term
Wed, 12/06/2017 - 19:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv