html+css实现视差滚动

0x00 HTML代码

<div class="main"> <section class="list-item"> <div class="item-image"> <img src="img/fan1.jpeg" alt="img-1"> </div><div class="item-text"> <div class="text-title">恋爱小行星</div><div class="text-desc"></div> </div></section> <section class="list-item"> <div class="item-image"> <img src="img/fan2.jpeg" alt="img-2"> </div><div class="item-text"> <div class="text-title">Comic Girls</div> <div class="text-desc"></div> </div></section> <section class="list-item"> <div class="item-image"> <img src="img/fan3.jpg" alt="img-3"> </div><div class="item-text"> <div class="text-title">辉夜大小姐想让我告白第二季</div> <div class="text-desc"></div> </div></section> <section class="list-item"> <div class="item-image"> <img src="img/fan4.jpeg" alt="img-4"> </div><div class="item-text"> <div class="text-title">邪神与厨二病少女第二季</div> <div class="text-desc"></div> </div></section> <section class="list-item"> <div class="item-image"> <img src="img/fan5.png" alt="img-5"> </div><div class="item-text"> <div class="text-title">公主连接Re:Dive</div> <div class="text-desc"></div> </div></section> </div>

0x01 css代码

* {box-sizing: border-box;}html, body {padding: 0;margin: 0;}html {/* 需要隐藏最外层不可见区域以使视差生效 */overflow: hidden;}body {width: 100vw;height: 100vh;perspective: 100px;transform-style: preserve-3d;/* 3D的容器要允许overflow才能生效 */overflow-y: auto;}.main {display: flex;flex-direction: column;align-items: center;justify-content: center;}.list-item {display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;width: 100%;height: 45vh;overflow: hidden;}.list-item:hover .item-image::before {background-color: rgba(0, 0, 0, 0.2);}.item-image {position: absolute;width: 100%;height: 100%;transform: translateZ(-50px) scale(2.4);z-index: -1;}.item-image::before {position: absolute;content: "";display: block;width: 100%;height: 100%;transition: all 0.3s ease;background-color: rgba(0, 0, 0, .4);}.item-image img {display: block;width: 100%;height: 100%;object-fit: cover;}.item-text {font-family: 'Courier New', Courier, monospace;text-align: center;color: #ffffff;}.text-title {font-size: 2rem;font-weight: bold;margin-bottom: 20px;}.text-desc {font-size: 1.2rem;}