登录页面（附源码）

特色：

点击登录之后卡片翻转效果

话不多说，看展示。

还在等什么，赶快白嫖起来吧

HTML文件


<div id="window" style="display: none"><div class="page page-front"><div class="page-content"><div class="input-row"><label class="label fadeIn">Username</label><input class="input fadeIn delay1" id="username" type="text" data-fyll="pineapple"/></div><div class="input-row"><label class="label fadeIn delay2">Password</label><input class="input fadeIn delay3" id="password" type="password" data-fyll="hackmeplease"/></div><div class="input-row perspective"><button class="button load-btn fadeIn delay4" id="submit"><span class="default"><i class="ion-arrow-right-b"></i>Login</span><div class="load-state"><div class="ball"></div><div class="ball"></div><div class="ball"></div></div></button></div></div></div><div class="page page-back"><div class="page-content"><img class="avatar" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/avatar.jpg"/><p class="welcome">Welcome back, Dog!</p><div class="perspective"><button class="button inline trigger-anim-replay"><i class="ion-refresh"></i>Replay animation</button></div></div></div>
</div>
<div class="browser-warning hidden">Glitchy or weird animation? Let it play through once, then press Replay.</div>

CSS文件

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300,100);
html, body {height: 100%;
}body {background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9ImVsbGlwc2UiIGN5PSJjbG9zZXN0LXNpZGUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNGUyYWYiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');background-size: 100%;background-image: -moz-radial-gradient(ellipse closest-side, #ffffff, #d4e2af);background-image: -webkit-radial-gradient(ellipse closest-side, #ffffff, #d4e2af);background-image: radial-gradient(ellipse closest-side, #ffffff, #d4e2af);-moz-perspective: 1000px;-webkit-perspective: 1000px;perspective: 1000px;font-family: 'Open Sans';font-weight: 300;
}*, *::after, *::before {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}#window {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;height: 350px;width: 450px;color: #FFF;-webkit-animation: 1.5s window ease-in-out backwards;-moz-animation: 1.5s window ease-in-out backwards;animation: 1.5s window ease-in-out backwards;-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-moz-transition-property: height, width;-o-transition-property: height, width;-webkit-transition-property: height, width;transition-property: height width;
}
#window, #window .page, #window .page-content {-moz-transition-duration: 1s;-o-transition-duration: 1s;-webkit-transition-duration: 1s;transition-duration: 1s;
}
#window.flip {height: 460px;width: 350px;
}
#window.flip .page-front {-moz-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-webkit-transform: rotateX(180deg);transform: rotateX(180deg);
}
#window.flip .page-back {-moz-transform: rotateX(360deg);-ms-transform: rotateX(360deg);-webkit-transform: rotateX(360deg);transform: rotateX(360deg);
}
#window.flip .page-back .page-content {opacity: 1;
}
#window.flip .page-back .avatar, #window.flip .page-back .welcome, #window.flip .page-back .perspective {opacity: 1;-moz-transform: none;-ms-transform: none;-webkit-transform: none;transform: none;-moz-transition-duration: 0.6s;-o-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;transition-duration: 0.6s;
}
#window.flip .page-back .avatar {-moz-transition-delay: 0.8s;-o-transition-delay: 0.8s;-webkit-transition-delay: 0.8s;transition-delay: 0.8s;
}
#window.flip .page-back .welcome {-moz-transition-delay: 0.8s;-o-transition-delay: 0.8s;-webkit-transition-delay: 0.8s;transition-delay: 0.8s;
}
#window.flip .page-back .perspective {-moz-transition-delay: 0.9s;-o-transition-delay: 0.9s;-webkit-transition-delay: 0.9s;transition-delay: 0.9s;
}
#window .page {position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-moz-backface-visibility: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-transform: translateZ(0);-ms-transform: translateZ(0);-webkit-transform: translateZ(0);transform: translateZ(0);background: #444;background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background-size: 100%;background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #444444), color-stop(100%, #333333));background-image: -moz-linear-gradient(bottom, #444444, #333333);background-image: -webkit-linear-gradient(bottom, #444444, #333333);background-image: linear-gradient(to top, #444444, #333333);-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;padding: 60px;
}
#window .page-back {text-align: center;-moz-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-webkit-transform: rotateX(180deg);transform: rotateX(180deg);
}
#window .page-back .page-content {opacity: 0;
}
#window .page-back .avatar {height: 150px;width: 150px;border: 5px solid #FFF;margin: 30px auto 40px auto;display: block;opacity: 0;-moz-transform: scale(0.1);-ms-transform: scale(0.1);-webkit-transform: scale(0.1);transform: scale(0.1);-moz-border-radius: 1000px;-webkit-border-radius: 1000px;border-radius: 1000px;
}
#window .page-back .welcome {font-size: 22px;margin-bottom: 40px;
}
#window .page-back .welcome, #window .page-back .perspective {opacity: 0;-moz-transform: translateY(-30px);-ms-transform: translateY(-30px);-webkit-transform: translateY(-30px);transform: translateY(-30px);
}
#window .input-row {margin: 0 0 30px;
}
#window .input-row:last-of-type {margin-bottom: 0;
}
#window .perspective {-moz-perspective: 1000px;-webkit-perspective: 1000px;perspective: 1000px;
}
#window .label {font-family: sans-serif;text-transform: uppercase;font-size: 12px;margin: 0 0 10px 0;color: #FFF;display: block;cursor: pointer;
}
#window .input {padding: 0 15px;height: 40px;line-height: 40px;outline: none;border: 0;background: #FFF;display: block;width: 100%;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;-webkit-transition-duration: 0.2s;transition-duration: 0.2s;
}
#window .input:focus, #window .input.fyll-focus {-moz-box-shadow: 0 0 0 3px #D85C89;-webkit-box-shadow: 0 0 0 3px #D85C89;box-shadow: 0 0 0 3px #D85C89;
}
#window .button {height: 50px;line-height: 50px;padding: 0 20px;margin: 0;text-align: center;color: #FFF;border: 0;display: block;width: 100%;outline: none;cursor: pointer;overflow: hidden;font-size: 17px;background: #D85C89;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q4NWM4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U3Nzc5ZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background-size: 100%;background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #d85c89), color-stop(100%, #e7779f));background-image: -moz-linear-gradient(bottom, #d85c89, #e7779f);background-image: -webkit-linear-gradient(bottom, #d85c89, #e7779f);background-image: linear-gradient(to top, #d85c89, #e7779f);-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 0 4px rgba(0, 0, 0, 0.5);-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 0 4px rgba(0, 0, 0, 0.5);box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 0 4px rgba(0, 0, 0, 0.5);-moz-transition-duration: 0.1s;-o-transition-duration: 0.1s;-webkit-transition-duration: 0.1s;transition-duration: 0.1s;-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-moz-transform-origin: bottom 50%;-ms-transform-origin: bottom 50%;-webkit-transform-origin: bottom 50%;transform-origin: bottom 50%;-moz-transform: translateZ(0);-ms-transform: translateZ(0);-webkit-transform: translateZ(0);transform: translateZ(0);-moz-backface-visibility: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden;
}
#window .button i {margin-right: 10px;
}
#window .button:active, #window .button.fyll-focus {background: #D85C89;background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q4NWM4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q4NWM4OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background-size: 100%;background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #d85c89), color-stop(100%, #d85c89));background-image: -moz-linear-gradient(bottom, #d85c89, #d85c89);background-image: -webkit-linear-gradient(bottom, #d85c89, #d85c89);background-image: linear-gradient(to top, #d85c89, #d85c89);-moz-transform: rotateX(20deg);-ms-transform: rotateX(20deg);-webkit-transform: rotateX(20deg);transform: rotateX(20deg);
}
#window .button.inline {width: auto;display: inline-block;
}
#window .button.load-btn .default, #window .button.load-btn .load-state {-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;-webkit-transition-duration: 0.2s;transition-duration: 0.2s;
}
#window .button.load-btn .load-state {position: absolute;top: -50px;left: 0;right: 0;height: 100%;text-align: center;line-height: 50px;pointer-events: none;
}
#window .button.load-btn .load-state .ball {height: 10px;width: 10px;margin-right: 10px;background: #FFF;display: inline-block;-moz-border-radius: 1000px;-webkit-border-radius: 1000px;border-radius: 1000px;-webkit-animation: ballBounce 0.3s alternate infinite;-moz-animation: ballBounce 0.3s alternate infinite;animation: ballBounce 0.3s alternate infinite;-webkit-animation-timing-function: cubic-bezier(0.2, 0.4, 0.3, 1);-moz-animation-timing-function: cubic-bezier(0.2, 0.4, 0.3, 1);animation-timing-function: cubic-bezier(0.2, 0.4, 0.3, 1);-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;
}
#window .button.load-btn .load-state .ball:nth-child(2n) {-webkit-animation-delay: 0.05s;-moz-animation-delay: 0.05s;animation-delay: 0.05s;
}
#window .button.load-btn .load-state .ball:nth-child(3n) {-webkit-animation-delay: 0.1s;-moz-animation-delay: 0.1s;animation-delay: 0.1s;
}
#window .button.load-btn .load-state .ball:last-child {margin-right: 0;
}
#window .button.load-btn.done .ball {opacity: 0;
}
#window .button.load-btn.loading .default {-moz-transform: translateY(50px);-ms-transform: translateY(50px);-webkit-transform: translateY(50px);transform: translateY(50px);opacity: 0;
}
#window .button.load-btn.loading .load-state {-moz-transform: translateY(50px);-ms-transform: translateY(50px);-webkit-transform: translateY(50px);transform: translateY(50px);
}.browser-warning {background: rgba(0, 0, 0, 0.7);padding: 15px 0;color: #FFF;position: absolute;top: 50px;left: 0;right: 0;margin: auto;width: 530px;text-align: center;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;-moz-transition-timing-function: cubic-bezier(0.015, 0.695, 0.34, 1.365);-o-transition-timing-function: cubic-bezier(0.015, 0.695, 0.34, 1.365);-webkit-transition-timing-function: cubic-bezier(0.015, 0.695, 0.34, 1.365);transition-timing-function: cubic-bezier(0.015, 0.695, 0.34, 1.365);
}
.browser-warning.hidden {opacity: 0;-moz-transform: scale(0.2);-ms-transform: scale(0.2);-webkit-transform: scale(0.2);transform: scale(0.2);
}.fadeIn {-webkit-animation: 1s fadeIn cubic-bezier(0.015, 0.695, 0.34, 1.365) backwards;-moz-animation: 1s fadeIn cubic-bezier(0.015, 0.695, 0.34, 1.365) backwards;animation: 1s fadeIn cubic-bezier(0.015, 0.695, 0.34, 1.365) backwards;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;
}.delay1 {-webkit-animation-delay: 1.6s;-moz-animation-delay: 1.6s;animation-delay: 1.6s;
}.delay2 {-webkit-animation-delay: 1.7s;-moz-animation-delay: 1.7s;animation-delay: 1.7s;
}.delay3 {-webkit-animation-delay: 1.8s;-moz-animation-delay: 1.8s;animation-delay: 1.8s;
}.delay4 {-webkit-animation-delay: 1.9s;-moz-animation-delay: 1.9s;animation-delay: 1.9s;
}@-webkit-keyframes $animationName {0% {-moz-transform: scale(0) rotateX(360deg);-ms-transform: scale(0) rotateX(360deg);-webkit-transform: scale(0) rotateX(360deg);transform: scale(0) rotateX(360deg);height: 150px;width: 150px;}50% {-moz-transform: none;-ms-transform: none;-webkit-transform: none;transform: none;height: 150px;}75% {height: 350px;width: 150px;}100% {width: 450px;}
}
@-moz-keyframes $animationName {0% {-moz-transform: scale(0) rotateX(360deg);-ms-transform: scale(0) rotateX(360deg);-webkit-transform: scale(0) rotateX(360deg);transform: scale(0) rotateX(360deg);height: 150px;width: 150px;}50% {-moz-transform: none;-ms-transform: none;-webkit-transform: none;transform: none;height: 150px;}75% {height: 350px;width: 150px;}100% {width: 450px;}
}
@keyframes $animationName {0% {-moz-transform: scale(0) rotateX(360deg);-ms-transform: scale(0) rotateX(360deg);-webkit-transform: scale(0) rotateX(360deg);transform: scale(0) rotateX(360deg);height: 150px;width: 150px;}50% {-moz-transform: none;-ms-transform: none;-webkit-transform: none;transform: none;height: 150px;}75% {height: 350px;width: 150px;}100% {width: 450px;}
}
@-webkit-keyframes $animationName {0% {opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);}100% {opacity: 1;-moz-transform: none;-ms-transform: none;-webkit-transform: none;transform: none;}
}
@-moz-keyframes $animationName {0% {opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);}100% {opacity: 1;-moz-transform: none;-ms-transform: none;-webkit-transform: none;transform: none;}
}
@keyframes $animationName {0% {opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);}100% {opacity: 1;-moz-transform: none;-ms-transform: none;-webkit-transform: none;transform: none;}
}
@-webkit-keyframes $animationName {0% {-moz-transform: translateY(25%);-ms-transform: translateY(25%);-webkit-transform: translateY(25%);transform: translateY(25%);}100% {-moz-transform: translateY(-75%);-ms-transform: translateY(-75%);-webkit-transform: translateY(-75%);transform: translateY(-75%);}
}
@-moz-keyframes $animationName {0% {-moz-transform: translateY(25%);-ms-transform: translateY(25%);-webkit-transform: translateY(25%);transform: translateY(25%);}100% {-moz-transform: translateY(-75%);-ms-transform: translateY(-75%);-webkit-transform: translateY(-75%);transform: translateY(-75%);}
}
@keyframes $animationName {0% {-moz-transform: translateY(25%);-ms-transform: translateY(25%);-webkit-transform: translateY(25%);transform: translateY(25%);}100% {-moz-transform: translateY(-75%);-ms-transform: translateY(-75%);-webkit-transform: translateY(-75%);transform: translateY(-75%);}
}

JS文件

jQuery(document).ready(function ($) {// If firefoxif (navigator.userAgent.toLowerCase().match(/firefox/)) {$(".browser-warning").removeClass("hidden");setTimeout(function () {$(".browser-warning").addClass("hidden");}, 6 * 1000);}// Display window (and start animation) when document is ready// This mininizes the risk of firefox messing up$("#window").attr("style", "");initAnimation();$(document).on("click", ".trigger-anim-replay", resetAnimation);function initAnimation() {setTimeout(function () {fyll.go("fill username then fill password then click submit",function () {$("#submit").addClass("loading");setTimeout(function () {$("#submit").addClass("done").closest("#window").addClass("flip");}, 1500);});}, 3 * 1000);}function resetAnimation() {var win = $("#window");win.stop().fadeOut(500, function () {// Reset thingswin.attr("style", "");win.find("input[type=text], input[type=password]").val("");win.find(".load-btn.loading").removeClass("loading done");// Clone and re-create window element to trigger animation restartwin.removeClass("flip");win.before(win.clone(true)).remove();// Restart animationinitAnimation();});}
});