html5卡片平行视差效果,HTML5/CSS3飞快的火车平行视差动画

CSS

语言：

CSSSCSS

确定

body {

margin: 0 !important;

padding: 0 !important;

overflow: hidden !important;

}

div {

margin: 0 !important;

padding: 0 !important;

}

.wrapper {

height: 1080px;

width: 1920px;

margin: auto;

background: #280744;

overflow: hidden !important;

}

.background {

height: 1080px;

width: 1920px;

background: url(/uploads/161101/bg.png);

background-repeat: repeat-x;

background-position: top center;

background-size: contain;

}

.rocks_1 {

position: absolute;

bottom: -5px;

height: 315px;

width: 1920px;

background: url(/uploads/161101/rocks_1.png);

background-repeat: repeat-x;

background-position: top center;

background-size: contain;

animation: translateX 100s infinite linear both;

}

.rocks_2 {

position: absolute;

bottom: -60px;

height: 315px;

width: 1920px;

background: url(/uploads/161101/rocks_2.png);

background-repeat: repeat-x;

background-position: top center;

background-size: contain;

animation: translateX 30s infinite linear both;

}

.rails {

position: absolute;

bottom: -110px;

height: 315px;

width: 1920px;

background: url(/uploads/161101/rails.png);

background-repeat: repeat-x;

background-position: top center;

background-size: contain;

animation: translateX 5s infinite linear both;

}

.train {

position: absolute;

bottom: -105px;

height: 315px;

width: 1500px;

right: 0px;

background: url(/uploads/161101/train.png);

background-repeat: no-repeat;

background-position: top center;

background-size: contain;

}

.ground {

position: absolute;

width: 1920px;

height: 98px;

bottom: 0px;

background: #16012f;

}

.lights {

position: absolute;

bottom: -39px;

height: 315px;

width: 1920px;

background: url(/uploads/161101/lights.png);

background-repeat: repeat-x;

background-position: top center;

background-size: contain;

animation: translateX 4s infinite linear both;

}

.moon {

position: absolute;

top: 20%;

height: 315px;

left: 200px;

width: 120px;

background: url(/uploads/161101/moon.png);

background-repeat: no-repeat;

background-position: top center;

background-size: contain;

}

@keyframes translateX {

0% {

background-position: 0px 0px;

}

100% {

background-position: 1920px 0px;

}

}