CSS - 使用CSS 3D屬性來完成頁面視差滾動效果。
阿新 • • 發佈：2020-08-23
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>視差滾動</title> <style> * { box-sizing: border-box; } html, body{ margin: 0; padding: 0; } html{ overflow: hidden; } body { height: 100vh; /* 開啟3d */ perspective: 100px; transform-style: preserve-3d; overflow-y: auto; } .main { display: flex; flex-direction: column; align-items: center; justify-content: center; } .list-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; 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%; z-index: -1; transform: translateZ(-50px) scale(2.4); } .item-image::before { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); transition: all 0.3s ease; } .item-image img { display: block; width: 100%; height: 100%; /* object-fit 需要設定尺寸 */ object-fit: cover; } .item-text { color: #fff; text-align: center; font-family: "Courier New", Courier, monospace; } .text-title { font-size: 2rem; font-weight: bolder; margin-bottom: 20px; } .text-desc { font-size: 1.2rem; } </style> </head> <body> <div class="main"> <div class="list-item"> <div class="item-image"> <img src="./img/4.png" alt="" /> </div> <div class="item-text"> <div class="text-title">CSS3D動畫</div> <div class="text-desc"> 採用 animation + transition 組合完成各種動畫加過渡效果 </div> </div> </div> <div class="list-item"> <div class="item-image"> <img src="./img/2.jpg" alt="" /> </div> <div class="item-text"> <div class="text-title">CSS3D動畫</div> <div class="text-desc"> 採用 animation + transition 組合完成各種動畫加過渡效果 </div> </div> </div> <div class="list-item"> <div class="item-image"> <img src="./img/3.jpg" alt="" /> </div> <div class="item-text"> <div class="text-title">CSS3D動畫</div> <div class="text-desc"> 採用 animation + transition 組合完成各種動畫加過渡效果 </div> </div> </div> <div class="list-item"> <div class="item-image"> <img src="./img/5.jpg" alt="" /> </div> <div class="item-text"> <div class="text-title">CSS3D動畫</div> <div class="text-desc"> 採用 animation + transition 組合完成各種動畫加過渡效果 </div> </div> </div> <div class="list-item"> <div class="item-image"> <img src="./img/6.jpg" alt="" /> </div> <div class="item-text"> <div class="text-title">CSS3D動畫</div> <div class="text-desc"> 採用 animation + transition 組合完成各種動畫加過渡效果 </div> </div> </div> <div class="list-item"> <div class="item-image"> <img src="./img/1.jpg" alt="" /> </div> <div class="item-text"> <div class="text-title">CSS3D動畫</div> <div class="text-desc"> 採用 animation + transition 組合完成各種動畫加過渡效果 </div> </div> </div> </div> </body> </html>
出處:https://www.bilibili.com/video/BV1Yt4y127Ds?from=search&seid=1888009266108241519