"mac"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: