纯CSS实现的视差滚动效果实例页面

代码

CSS代码：

.demo {
    perspective: 1px; padding: 0; height: 600px; height: calc(100vh - 300px); overflow: auto;
}
.box {
    height: 1280px;
    transform-style: preserve-3d;
    position: relative;
}
.iphone {
    position: absolute; left: 50%;
    transform: translate3D(-50%, -120px, -1px) scale(2);
}

.smile, .flower, .music, .pdf { /* 略... */ }
                

HTML代码：

<div class="demo">
    <div class="box">
        <img src="mobile_1_iphone.jpg" class="iphone">
        <i class="smile"></i><i class="flower"></i><i class="music"></i><i class="pdf"></i>
    </div>
</div>