Login Page Form

index.pug

.center
  .ear.ear--left
  .ear.ear--right
  
  .face
    .eyes
      .eye.eye--left
        .glow
      .eye.eye--right
        .glow
    .nose
      svg(width="38.161" height="22.03")
        path(d="M2.017 10.987Q-.563 7.513.157 4.754C.877 1.994 2.976.135 6.164.093 16.4-.04 22.293-.022 32.048.093c3.501.042 5.48 2.081 6.02 4.661q.54 2.579-2.051 6.233-8.612 10.979-16.664 11.043-8.053.063-17.336-11.043z" fill="#243946")
      .glow

    .mouth
      svg.smile(viewBox="-2 -2 84 23" width="84" height="23")
        path(d="M0 0c3.76 9.279 9.69 18.98 26.712 19.238 17.022.258 10.72.258 28 0S75.959 9.182 79.987.161" fill="none" stroke-width="3" stroke-linecap="square" stroke-miterlimit="3")
      .mouth-hole
      .tongue.breath
        .tongue-top
        .line
        .median

  .hands
    .hand.hand--left
      .finger
        .bone
        .nail
      .finger
        .bone
        .nail
      .finger
        .bone
        .nail

    .hand.hand--right
      .finger
        .bone
        .nail
      .finger
        .bone
        .nail
      .finger
        .bone
        .nail

  .login
    label
      .fa.fa-phone
      input.username(type='text' autocomplete='on' placeholder='手机号码')

    label
      .fa.fa-commenting
      input.password(type='password' autocomplete='off' placeholder='健谈的')
      button.password-button 显示密码

    button.login-button 登录

  .social-buttons
    .social
      .fa.fa-wechat
    .social
      .fa.fa-weibo
    .social
      .fa.fa-paw

  .footer 随机文本

a(href='https://dribbble.com/shots/4485321-Login-Page-Homepage' class='inspiration' target='_blank' rel='noopener')
  img(src='https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png' alt='inspiration')

login-page-form.markdown

Login Page Form

A Pen by Filip Vitas on CodePen.

License.

script.babel

/*
  Inspired by: "Login Page & Homepage"
  By: Neo
  Link: https://dribbble.com/shots/4485321-Login-Page-Homepage
*/

let usernameInput = document.querySelector('.username')
let passwordInput = document.querySelector('.password')
let showPasswordButton = document.querySelector('.password-button')
let face = document.querySelector('.face')

passwordInput.addEventListener('focus', event => {
  document.querySelectorAll('.hand').forEach(hand => {
    hand.classList.add('hide')
  })
  document.querySelector('.tongue').classList.remove('breath')
})

passwordInput.addEventListener('blur', event => {
  document.querySelectorAll('.hand').forEach(hand => {
    hand.classList.remove('hide')
    hand.classList.remove('peek')
  })
  document.querySelector('.tongue').classList.add('breath')
})

usernameInput.addEventListener('focus', event => {
  let length = Math.min(usernameInput.value.length - 16, 19)
  document.querySelectorAll('.hand').forEach(hand => {
    hand.classList.remove('hide')
    hand.classList.remove('peek')
  })
  
  face.style.setProperty('--rotate-head', `${-length}deg`)
})

usernameInput.addEventListener('blur', event => {
  face.style.setProperty('--rotate-head', '0deg')
})
  
usernameInput.addEventListener('input', _.throttle(event => {
  let length = Math.min(event.target.value.length - 16, 19)
  
  face.style.setProperty('--rotate-head', `${-length}deg`)
}, 100))

showPasswordButton.addEventListener('click', event => {
  if (passwordInput.type === 'text') {
    passwordInput.type = 'password'
    document.querySelectorAll('.hand').forEach(hand => {
      hand.classList.remove('peek')
      hand.classList.add('hide')
    })
  } else {
    passwordInput.type = 'text'
    document.querySelectorAll('.hand').forEach(hand => {
      hand.classList.remove('hide')
      hand.classList.add('peek')
    })
  }
})

scripts

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

style.stylus

$dark-blue = #243946

@keyframes breath
  0%
  100%
    transform: rotateX(0deg)
  50%
    transform: rotateX(60deg)

*
  box-sizing: border-box
  
body
  width: 100vw
  height: 100vh
  background-color: #e0e0e0
  overflow: hidden
  font-size: 12px
  
.inspiration
  position: fixed
  bottom: 0
  right: 0
  padding: 10px
  text-align: center
  text-decoration: none
  font-family: 'Gill Sans', sans-serif
  font-size: 12px
  color: rgb(150, 150, 150)
  
  img
    width: 60px

.center
  position: relative
  top: 50%
  left: 50%
  display: inline-block
  width: 275px
  height: 490px
  border-radius: 3px
  transform: translate(-50%, -50%)
  overflow: hidden
  background-image: linear-gradient(to top right, #f9a743, #f9db5f)
  
  @media screen and (max-height: 500px)
    transition: transform 0.5s
    transform: translate(-50%, -50%) scale(0.8)

  .ear
    position: absolute
    top: -110px
    width: 200px
    height: 200px
    border-radius: 50%
    background-color: $dark-blue
    
    &.ear--left
      left: -135px

    &.ear--right
      right: -135px

  .face
    display: flex
    flex-direction: column
    align-items: center
    width: 200px
    height: 150px
    margin: 80px auto 10px
    --rotate-head: 0deg
    transform: rotate(var(--rotate-head))
    transition transform 0.2s
    transform-origin: center 20px
    
  .eye
    display: inline-block
    width: 25px
    height: 25px
    border-radius: 50%
    background-color: $dark-blue
    
    &.eye--left
      margin-right: 40px
    &.eye--right
      margin-left: 40px
    
    .glow
      position: relative
      top: 3px
      right: -12px
      width: 12px
      height: 6px
      border-radius: 50%
      background-color: white
      transform: rotate(38deg)

  .nose
    position: relative
    top: 30px
    transform: scale(1.1)
    
    .glow
      position: absolute
      top: 3px
      left: 32%
      width: 15px
      height: 8px
      border-radius: 50%
      background-color: #476375
      
  .mouth
    position: relative
    margin-top: 45px
    
  svg.smile
    position: absolute
    left: -28px
    top: -19px
    transform: scaleX(1.1)
    stroke: $dark-blue

  .mouth-hole
    position: absolute
    top: 0
    left: -50%
    width: 60px
    height: 15px
    border-radius: 50% / 100% 100% 0% 0
    transform: rotate(180deg)
    background-color: $dark-blue
    z-index: -1

  .tongue
    position: relative
    top: 5px
    width: 30px
    height: 20px
    background-color: #ffd7dd
    transform-origin: top
    transform: rotateX(60deg)

    &.breath
      animation: breath 0.3s infinite linear
      
  .tongue-top
    position: absolute
    bottom: -15px
    width: 30px
    height: 30px
    border-radius: 15px
    background-color: #ffd7dd
    
  .line
    position: absolute
    top: 0
    width: 30px
    height: 5px
    background-color: #fcb7bf
  
  .median
    position: absolute
    top: 0
    left: 50%
    transform: translateX(-50%)
    width: 4px
    height: 25px
    border-radius: 5px
    background-color: #fcb7bf


  .hands
    position: relative
    
    .hand
      position: absolute
      top: -6px
      display: flex
      transition: transform 0.5s ease-in-out
      z-index: 1

    .hand--left
      left: 50px

      &.hide
        transform: translate(2px, -155px) rotate(-160deg)
      &.peek
        transform: translate(0px, -120px) rotate(-160deg)
    
    .hand--right
      left: 170px
      
      &.hide
        transform: translate(-6px, -155px) rotate(160deg)  
      &.peek
        transform: translate(-4px, -120px) rotate(160deg)
      
    .finger
      position: relative
      z-index: 0
      
      .bone
        width: 20px
        height: 20px
        border: 2px solid $dark-blue
        border-bottom: none
        border-top: none
        background-color: #fac555
        
      .nail
        position: absolute
        left: 0
        top: 10px
        width: 20px
        height: 18px
        border-radius: 50%
        border: 2px solid $dark-blue
        background-color: #fac555
        z-index: -1

      &:nth-child(1)
      &:nth-child(3)
        left: 4px
        z-index: 1
        .bone
          height: 10px
          
      &:nth-child(3)
        left: -4px
  
      &:nth-child(2)
        top: -5px
        z-index: 2
      
      &:nth-child(1)
      &:nth-child(3)
        .nail
          top: 0px
              
    
  .login
    position: relative
    display: flex
    flex-direction: column
    
    label
      position: relative
      padding: 0 20px
      
      .fa
        position: absolute
        top: 40%
        left: 35px
        color: #bbb
        
      .fa:before
        position: relative
        left: 1px
    
    input
    .login-button
      width: 100%
      height: 35px
      border: none
      border-radius: 30px
    
    input
      padding: 0 20px 0 40px
      margin: 5px 0
      box-shadow: none
      outline: none
      
    input::placeholder
      color: #ccc
    
    input.password
      padding: 0 90px 0 40px  
    
    .password-button
      position: absolute
      top: 9px
      right: 25px
      display: flex
      justify-content: center
      align-items: center
      width: 80px
      height: 27px
      border-radius: 30px
      border: none
      outline: none
      background-color: $dark-blue
      color: white
      
      &:active
        transform: scale(0.95)
      
    .login-button
      width: calc(100% - 40px)
      margin: 20px 20px 0
      outline: none
      background-color: $dark-blue
      color: white
      transition: transform 0.1s
      
      &:active
        transform: scale(0.95)

  .social-buttons
    display: flex
    justify-content: center
    margin-top: 25px
    
    .social
      display: flex
      justify-content: center
      align-items: center
      width: 35px
      height: 35px
      margin: 0 10px
      border-radius: 50%
      background-color: $dark-blue
      color: white
      font-size: 18px
      
      &:active
        transform: scale(0.95)
  
  .footer
    text-align: center
    margin-top: 15px
    

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

THANKS A LOT