特色:
点击登录之后卡片翻转效果
话不多说,看展示。
还在等什么,赶快白嫖起来吧
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 firefox
if (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 things
win.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 restart
win.removeClass("flip");
win.before(win.clone(true)).remove();
// Restart animation
initAnimation();
});
}
});