<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/dviate/pen/YXqzMY?limit=all&page=12&q=mac" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">* {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Helvetica Neue", Arial;
font-size: 14px;
font-weight: 100;
background-color: #FFF;
overflow: hidden;
}
.container {
position: relative;
top: 50%;
left: 50%;
width: 200px;
height: 400px;
-webkit-transform: translateX(-50%) translateY(-50%) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
transform: translateX(-50%) translateY(-50%) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
}
.levitate {
-webkit-animation: levitate 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
animation: levitate 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
input[type="password"] {
position: absolute;
left: -65px;
top: 420px;
z-index: 20;
width: 300px;
height: 48px;
line-height: 48px;
padding: 8px;
border-width: 1px;
border-style: solid;
border-color: #7fc7df;
border-radius: 4px;
font-size: 16px;
text-align: center;
-webkit-transition: all .25s;
transition: all .25s;
}
input[type="password"]:focus {
border-color: #42adcf;
outline: none;
}
input[type="password"]:focus::-webkit-input-placeholder {
color: #d1ebf3;
}
input[type="password"]:focus::-moz-placeholder {
color: #d1ebf3;
}
input[type="password"]:focus:-ms-input-placeholder {
color: #d1ebf3;
}
input[type="password"]:focus::placeholder {
color: #d1ebf3;
}
input[type="password"]::-webkit-input-placeholder {
color: #A8D9E9;
-webkit-transition: all .25s;
transition: all .25s;
}
input[type="password"]::-moz-placeholder {
color: #A8D9E9;
-webkit-transition: all .25s;
transition: all .25s;
}
input[type="password"]:-ms-input-placeholder {
color: #A8D9E9;
-webkit-transition: all .25s;
transition: all .25s;
}
input[type="password"]::placeholder {
color: #A8D9E9;
-webkit-transition: all .25s;
transition: all .25s;
}
.base {
position: absolute;
z-index: 1;
height: 650px;
width: 650px;
top: -10px;
left: -235px;
border-radius: 50%;
-webkit-transform: perspective(1200px) rotateX(65deg) translateY(-130px);
transform: perspective(1200px) rotateX(65deg) translateY(-130px);
background-image: -webkit-radial-gradient(50% 50% circle, #a8d9e9 0%, #ffffff 65%, #ffffff);
background-image: radial-gradient(circle at 50% 50%, #a8d9e9 0%, #ffffff 65%, #ffffff);
}
.curl {
position: absolute;
z-index: 13;
top: -20px;
left: 60px;
width: 40px;
height: 40px;
border-radius: 30% 70% 30% 30%;
border-right: 8px solid #3E250A;
}
.face {
position: absolute;
z-index: 12;
border-radius: 50%;
width: 180px;
height: 200px;
background-image: -webkit-radial-gradient(#d79957 40%, #b27437);
background-image: radial-gradient(#d79957 40%, #b27437);
}
.ear {
position: absolute;
z-index: 11;
width: 35px;
height: 50px;
border-radius: 50%;
background-image: -webkit-radial-gradient(#b27437, #d79957);
background-image: radial-gradient(#b27437, #d79957);
}
.ear.left {
top: 60px;
left: -15px;
}
.ear.right {
top: 63px;
left: 160px;
}
.eye {
position: absolute;
z-index: 12;
top: 70px;
left: 33px;
background-color: #FFF;
border-radius: 50%;
width: 48px;
height: 50px;
}
.eye.left {
left: 33px;
}
.eye.right {
left: 100px;
}
.eye .pupil {
position: absolute;
top: 18px;
left: 7px;
background-color: #000;
border-width: 8px;
border-style: solid;
border-color: #613a10;
border-radius: 50%;
width: 15px;
height: 15px;
box-sizing: content-box;
-webkit-animation: rolleyes 3s linear infinite;
animation: rolleyes 3s linear infinite;
}
.eye .pupil.is-hidden {
-webkit-animation: none;
animation: none;
}
.hand {
position: absolute;
z-index: 13;
top: 160px;
width: 50px;
height: 40px;
border-radius: 50%;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: .5s all;
transition: .5s all;
background-image: -webkit-radial-gradient(#d79957, #b27437);
background-image: radial-gradient(#d79957, #b27437);
}
.hand.left {
left: -30px;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
-webkit-animation: type .7s ease-out infinite;
animation: type .7s ease-out infinite;
}
.hand.right {
left: 155px;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-animation: type .5s 1s ease-out infinite;
animation: type .5s 1s ease-out infinite;
}
.hand.is-hidden.left {
left: 30px;
-webkit-animation: handsoff_left .35s ease-out forwards 1;
animation: handsoff_left .35s ease-out forwards 1;
}
.hand.is-hidden.right {
left: 100px;
-webkit-animation: handsoff_right .35s ease-out forwards 1;
animation: handsoff_right .35s ease-out forwards 1;
}
.hand.handsback {
-webkit-animation: handsback .8s ease-out forwards 1;
animation: handsback .8s ease-out forwards 1;
}
.nijnbook {
position: absolute;
z-index: 15;
top: 125px;
left: -35px;
background-color: #FFF;
border-radius: 5%;
width: 250px;
height: 180px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
background-image: -webkit-radial-gradient(#eeeeee, #cccccc);
background-image: radial-gradient(#eeeeee, #cccccc);
-webkit-transform: perspective(600px) rotateX(-25deg);
transform: perspective(600px) rotateX(-25deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.nijnbook .logo {
position: absolute;
z-index: 16;
top: 48px;
left: 95px;
margin: 0 auto;
width: 40px;
height: 35px;
}
.nijnbook .logo img {
width: 50px;
height: 70px;
}
.foot.left {
position: relative;
z-index: 25;
}
.foot.right {
position: relative;
z-index: 25;
right: 20px;
background-color: #000;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.foot .sole {
position: absolute;
z-index: 13;
top: 196px;
left: -82px;
border-radius: 50%;
width: 60px;
height: 92px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
background: -webkit-radial-gradient(#b27437 10%, #d79957);
background: radial-gradient(#b27437 10%, #d79957);
-webkit-transform: rotate(-29deg);
transform: rotate(-29deg);
}
.foot .sole .toe {
position: absolute;
z-index: -1;
top: -18px;
left: 38px;
border-radius: 50%;
width: 25px;
height: 30px;
background: -webkit-radial-gradient(#b27437 10%, #d79957);
background: radial-gradient(#b27437 10%, #d79957);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.foot .sole .toe.toe02 {
top: -15px;
left: 20px;
width: 15px;
height: 20px;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.foot .sole .toe.toe03 {
top: -8px;
left: 7px;
width: 13px;
height: 20px;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.foot .sole .toe.toe04 {
top: 6px;
left: 0;
width: 9px;
height: 14px;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.foot .sole .toe.toe05 {
top: 20px;
left: -1px;
width: 6px;
height: 9px;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
/* keyframes */
@-webkit-keyframes type {
0% {
top: 160px;
}
100% {
top: 120px;
}
}
@keyframes type {
0% {
top: 160px;
}
100% {
top: 120px;
}
}
@-webkit-keyframes rolleyes {
0% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
25% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
45% {
-webkit-transform: translateX(-4px) translateY(-2px);
transform: translateX(-4px) translateY(-2px);
}
85% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
}
@keyframes rolleyes {
0% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
25% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
45% {
-webkit-transform: translateX(-4px) translateY(-2px);
transform: translateX(-4px) translateY(-2px);
}
85% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
}
@-webkit-keyframes levitate {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@keyframes levitate {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@-webkit-keyframes handsoff_left {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
-webkit-transform: translateY(-70px) rotate(125deg);
transform: translateY(-70px) rotate(125deg);
}
}
@keyframes handsoff_left {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
-webkit-transform: translateY(-70px) rotate(125deg);
transform: translateY(-70px) rotate(125deg);
}
}
@-webkit-keyframes handsoff_right {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
-webkit-transform: translateY(-70px) rotate(-125deg);
transform: translateY(-70px) rotate(-125deg);
}
}
@keyframes handsoff_right {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
-webkit-transform: translateY(-70px) rotate(-125deg);
transform: translateY(-70px) rotate(-125deg);
}
}
@-webkit-keyframes handsback {
0% {
-webkit-transform: translateY(-70px);
transform: translateY(-70px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes handsback {
0% {
-webkit-transform: translateY(-70px);
transform: translateY(-70px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
</style></head><body>
<div class="container">
<div class="levitate">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face"></div>
<div class="curl"></div>
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
<div class="hand left"></div>
<div class="hand right"></div>
<div class="nijnbook">
<div class="logo">
<img src="//static.dviate.com/dump/nijntje.svg" alt="Nijntje">
</div>
</div>
<div class="foot left">
<div class="sole">
<div class="toe"></div>
<div class="toe toe02"></div>
<div class="toe toe03"></div>
<div class="toe toe04"></div>
<div class="toe toe05"></div>
</div>
</div>
<div class="foot right">
<div class="sole">
<div class="toe"></div>
<div class="toe toe02"></div>
<div class="toe toe03"></div>
<div class="toe toe04"></div>
<div class="toe toe05"></div>
</div>
</div>
<div class="base"></div>
<form>
<input type="password" placeholder="What's the password?">
</form>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script >$('input[type="password"]').focus(function() {
$('.hand, .pupil').addClass('is-hidden');
}).blur(function() {
$('.hand, .pupil').addClass('handsback').delay(500).queue(function(){
$(this).removeClass('is-hidden').dequeue().delay(1200).queue(function() {
$(this).removeClass('handsback').dequeue();
});
});
});
//# sourceURL=pen.js
</script>
</body></html>
