html折叠卡片,HTML5 层叠的卡片

CSS

语言：

CSSSCSS

确定

.container {

width: 320px;

height: 568px;

}

.passes {

width: 100%;

list-style: none;

padding: 0;

margin: 0;

display: inline-block;

position: relative;

}

.passes li {

position: absolute;

display: inline-block;

width: 100%;

height: 300px;

border-radius: 10px;

-webkit-box-shadow: 0px -15px 20px 0px rgba(0, 0, 0, 0.27);

-moz-box-shadow: 0px -15px 20px 0px rgba(0, 0, 0, 0.27);

box-shadow: 0px -15px 20px 0px rgba(0, 0, 0, 0.27);

margin: 0;

padding: 0;

overflow: hidden;

-webkit-transition: all 0.4s ease-out;

}

.passes li.current {

-webkit-transform: translate3d(0, 0, 0) !important;

}

.passes li:before,

.passes li:after {

content: '';

position: absolute;

width: 10px;

height: 10px;

background: #fff;

border-radius: 50%;

top: 30px;

left: -5px;

}

.passes li:after {

left: auto;

right: -5px;

}

.easyjet {

background: #f60;

color: #fff;

}

.airberlin {

background: #cc1f2f;

color: #fff;

}

.ba {

background: #031b41;

color: #fff;

}

.passes li > div {

font-family: "Helvetica Neue", sans;

margin-top: 10px;

text-align: center;

pointer-events: none;

}