.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')
View Compiled
$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
View Compiled
/*
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')
})
}
})
View Compiled
