卡片效果html css3,CSS3 卡片重影效果

CSS

语言：

CSSSCSS

确定

.container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-align-content: center;

-ms-flex-line-pack: center;

align-content: center;

height: 100vh;

}

.container .box {

height: 100px;

width: 100px;

box-shadow: 10px 10px 0px 0px rgba(0, 0, 255, 0.2), 20px 20px 0 0 rgba(0, 128, 0, 0.2), 30px 30px 0 0 rgba(128, 0, 128, 0.2);

-webkit-transition: all 1s ease;

transition: all 1s ease;

text-align: center;

font-size: 3em;

color: #fff;

line-height: 100px;

position: relative;

}

.container .box:hover {

box-shadow: 0 0 0 0 #f00;

}

.fb {

background-color: #00f;

right: 100px;

z-index: 0;

}

.fb:hover {

z-index: 1;

}

.gplus {

background: #f00;

z-index: 1;

right: 15px;

bottom: 15px;

}

.gplus:hover {

z-index: 1;

}

.gh {

background: #000;

right: 180px;

top: 20px;

z-index: -1;

}

.gh:hover {

z-index: 2;

}