效果演示
html 代码
<link rel="stylesheet" href="index.css">
<div class="hero">
<div class="parallax-layer layer-6"></div>
<div class="parallax-layer layer-5"></div>
<div class="parallax-layer layer-4"></div>
<div class="parallax-layer bike-1"></div>
<div class="parallax-layer bike-2"></div>
<div class="parallax-layer layer-3"></div>
<div class="parallax-layer layer-2"></div>
<div class="parallax-layer layer-1"></div>
</div>
css 代码
* { box-sizing: border-box; }
body { font-family: "Lato", sans-serif; }
.hero { width: 100%; height: 100%; min-height: 450px; position: relative; top: 0; left: 0; background-color: #5dec69; transform: translate3d(0, 0, 0); }
.layer-1 { animation: parallax_fg linear 20s infinite both; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/1.png) 0 100% repeat-x; z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-size: auto 136px; }
.layer-2 { animation: parallax_fg linear 30s infinite both; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/2.png) 0 100% repeat-x; z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-size: auto 145px; }
.layer-3 { animation: parallax_fg linear 55s infinite both; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/3.png) 0 100% repeat-x; z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-size: auto 158px; }
.layer-4 { animation: parallax_fg linear 75s infinite both; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/4.png) 0 100% repeat-x; z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-size: auto 468px; }
.layer-5 { animation: parallax_fg linear 95s infinite both; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/5.png) 0 100% repeat-x; z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-size: auto 311px; }
.layer-6 { animation: parallax_fg linear 120s infinite both; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/6.png) 0 100% repeat-x; z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-size: auto 222px; }
.bike-1, .bike-2 { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/bike.png) 0 100% no-repeat; z-index: 1; position: absolute; bottom: 100px; left: 0; width: 100%; height: 100%; background-size: auto 75px; animation: parallax_bike linear 10s infinite both; }
.bike-2 { animation: parallax_bike linear 15s infinite both; }
@keyframes parallax_fg { 0% { background-position: 2765px 100%; } 100% { background-position: 550px 100%; } }
@keyframes parallax_bike { 0% { background-position: -300px 100%; } 100% { background-position: 2000px 100%; } }
