css动态堆叠卡,CSS3 卡片堆栈（重叠的卡片）

CSS

语言：

CSSSCSS

确定

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600);

*,

*::before,

*::after {

box-sizing: border-box;

}

body {

margin: 2rem 0.5rem;

background-color: #c4c8cc;

color: #404448;

font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

line-height: 1.4;

}

h1 {

margin: 0 0 2rem;

font-weight: 400;

line-height: 1.1;

text-align: center;

}

p {

margin: 0 0 1.4em;

}

ul {

margin: 0 0 1.4em;

padding: 0;

padding-left: 1.15em;

/**

* The card stack mixin.

*

* @param color $card-color Main color of the card stack. Defaults to white.

* @param color $shadow-color Color of the shadow. Defaults to black.

*

* @return box-shadow Applies a box shadow to the element.

*/

list-style-type: square;

}

.card {

margin: 0 auto 2rem;

padding: 1rem;

min-width: 10rem;

max-width: 20rem;

background-color: white;

word-wrap: break-word;

box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #f2f2f2, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #e5e5e5, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);

}

.card.card-primary,

.card.card-dark {

color: white;

}

.card.card-primary {

background-color: tomato;

text-shadow: 0 0.0625em 0 rgba(0, 0, 0, 0.25);

box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #f25e43, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #e5593f, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);

}

.card.card-secondary {

background-color: #47e3ff;

box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #43d7f2, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #3fcce5, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);

}

.card.card-dark {

background-color: #404040;

box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #3c3c3c, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #393939, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);

}

.card >:last-child {

margin-bottom: 0;

}