html5卡片平行视差效果,HTML5 粉红色晶矿平行视差动效

CSS

语言：

CSSSCSS

确定

html {

width: 100%;

height: 100%;

background: #555;

background: -webkit-radial-gradient(center, ellipse, #333 0%, #111 100%);

background: radial-gradient(ellipse at center, #333 0%, #111 100%);

}

.container {

display: block;

margin: 0 auto;

margin-top: 50px;

position: relative;

width: 1200px;

height: 600px;

overflow: hidden;

background: #00f;

}

.container img {

position: absolute;

left: -200px;

top: -150px;

}

.container img:nth-child(1) {

z-index: 4;

}

.container img:nth-child(2) {

z-index: 3;

}

.container img:nth-child(3) {

z-index: 2;

}

.container img:nth-child(4) {

z-index: 1;

}

.container span {

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

background: -webkit-linear-gradient(top, #d64f89 0%, #fdb054 100%);

/* W3C */

background: linear-gradient(to bottom, #d64f89 0%, #fdb054 100%);

opacity: 0.1;

z-index: 9;

}

#js_out {

font-family: Arial;

text-align: center;

font-size: 18px;

}