特色:
点击登录之后卡片翻转效果
话不多说,看展示。

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

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

最低0.47元/天 解锁文章
3519

被折叠的 条评论
为什么被折叠?



