html5 面板折叠,HTML5仿苹果手机的面板合拢折叠效果

passbook仿苹果手机的面板合拢折叠效果-html5特效

.pocket{

width:300px;

height:460px;

padding: 10px;

overflow: hidden;

float: left;

border: 1px solid #EDEDED;

margin: 4px;

border-radius: 8px;

box-shadow:0 -5px 30px rgba(0,0,0,0.2) inset;

}

.passcard {

float: left;

width:300px;

height:380px;

color: #878787;

text-align: center;

padding-top: 5px;

margin-bottom: -320px;

cursor: pointer;

}

.starbucks{

background:url(/jscss/demoimg/201307/starbucks.png) no-repeat;

}

.airport{

background:url(/jscss/demoimg/201307/airport.png) no-repeat;

}

.paper{

border: 1px solid #EDEDED;

color: #A8A8A8;

text-align: center;

font:26px 'Segoe UI Light',Helvetica,Arial,'Sans-Serif';

background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(229, 249, 249, 1)),color-stop(100%,rgba(240, 240, 240, 1)));

background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);

background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);

background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);

background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);

background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);

background: -webkit-linear-gradient(top,rgba(255, 255, 255, 0.05) 0%,rgba(255, 255, 255, 0.05) 20%,rgba(0, 0, 0, 0.05) 100%);

border-radius:14px;

box-shadow:-2px -1px 2px rgba(0,0,0,0.1);

}

.pod {

background: none repeat scroll 0 0 white;

cursor: pointer;

height: 160px;

width: 300px;

border: 1px solid #CDCDCD;

border-radius: 6px;

float: left;

margin: 3px 15px 15px 3px;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -4px 0 #E8E8E8 inset;

}

passcard 1

passcard 2

passcard 3

$(function(){

$('.passcard').hover(function(){

$(this).stop(false,false).animate({'margin-bottom':'-100px'},400)

},function(){

$(this).stop(false,false).animate({'margin-bottom':'-320px'},400)

})

})