Created
September 13, 2018 12:45
-
-
Save franklinokech/bb81c3d27beab5ad498b36ed38a9364e to your computer and use it in GitHub Desktop.
An animated LoginForm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--HTML --> | |
<div class="owl"> | |
<div class="hand"></div> | |
<div class="hand hand-r"></div> | |
<div class="arms"> | |
<div class="arm"></div> | |
<div class="arm arm-r"></div> | |
</div> | |
</div> | |
<div class="form"> | |
<div class="control"> | |
<label for="email" class="fa fa-envelope"></label> | |
<input id="email" placeholder="Email" type="email"></input> | |
</div> | |
<div class="control"> | |
<label for="password" class="fa fa-asterisk"></label> | |
<input id="password" placeholder="Password" type="password"></input> | |
</div> | |
</div> | |
<!-- JS --> | |
$('input[type="password"]').on('focus', () => { | |
$('*').addClass('password'); | |
}).on('focusout', () => { | |
$('*').removeClass('password'); | |
});; | |
<!-- css --> | |
@import url('https://fonts.googleapis.com/css?family=Roboto') | |
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css') | |
body | |
background-color #1a8fb4 | |
font-family 'Roboto', sans-serif | |
font-size 14px | |
.owl | |
margin auto | |
width 211px | |
height 108px | |
background-image url('https://dash.readme.io/img/owl-login.png') | |
position relative | |
.hand | |
width 34px | |
height 34px | |
border-radius 40px | |
background-color #472d20 | |
transform scaleY(0.6) | |
position absolute | |
left 14px | |
bottom -8px | |
transition 0.3s ease-out | |
&.password | |
transform translateX(42px) translateY(-15px) scale(0.7); | |
&.hand-r | |
left 170px | |
&.password | |
transform translateX(-42px) translateY(-15px) scale(0.7); | |
.arms | |
position absolute | |
top 58px | |
height 41px | |
width 100% | |
overflow hidden | |
.arm | |
width 40px | |
height 65px | |
background-image url('https://dash.readme.io/img/owl-login-arm.png') | |
position absolute | |
left 20px | |
top 40px | |
transition 0.3s ease-out | |
&.password | |
transform translateX(40px) translateY(-40px) | |
&.arm-r | |
left 158px | |
transform scaleX(-1) | |
&.password | |
transform translateX(-40px) translateY(-40px) scaleX(-1) | |
.form | |
margin auto | |
margin-top -9px | |
padding 30px | |
background-color white | |
width 175px | |
.control | |
margin-bottom 10px | |
position relative | |
label | |
position absolute | |
font-size 16px | |
top 11px | |
left 9px | |
color rgba(0,0,0,0.3) | |
input | |
padding 9px 6px 9px 30px | |
border-radius 4px | |
border 1px solid #cccccc | |
font-size 14px |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment