爱站程序员基地<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>css 视差滚动</title></head><style>body {padding: 0;margin: 0;}::-webkit-scrollbar {display: none;}html {overflow: hidden;}body {width: 100vw;height: 100vh;/* 视差滚动 实现的两句效果所在 */perspective: 100px;transform-style: preserve-3d;overflow-y: auto;}.main {display: flex;flex-direction: column;justify-content: center;align-items: center;}.list-item:hover .item-img::before {background-color: rgba(0, 0, 0, .2);}.list-item {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 45vh;overflow: hidden;}.item-img {position: absolute;/*100% 的快捷方式 w100p */width: 100%;height: 100%;z-index: -1;transform: translateZ(-50px) scale(2.4);}.item-img::before {content: \'\';display: block;position: absolute;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .4);transition: all .3s ease;}.item-img img {display: block;width: 100%;height: 100%;object-fit: cover;}.item-text {color: #fff;font-family: \'Courier New\', courier, monospace;text-align: center;}.text-title {font-size: 2rem;font-weight: bolder;margin-bottom: 20px;}.text-desc {font-size: 1.2rem;}</style><body><main class=\"main\"><section class=\"list-item\"><div class=\"item-img\"><img src=\"./桌面01.jpg\" alt=\"img-01\"></div><div class=\"item-text\"><div class=\"text-title\">「秒速五厘米」</div><div class=\"text-desc\">有些人注定要错过 在你无能为力的时候</div></div></section><section class=\"list-item\"><div class=\"item-img\"><img src=\"./桌面03.jpg\" alt=\"img-03\"></div><div class=\"item-text\"><div class=\"text-title\">「提督出发了」</div><div class=\"text-desc\">我承认 我是老色痞了</div></div></section><section class=\"list-item\"><div class=\"item-img\"><img src=\"./桌面02.jpg\" alt=\"img-02\"></div><div class=\"item-text\"><div class=\"text-title\">「红衣妹子」</div><div class=\"text-desc\">豆蔻年华 最美好的年纪最无忧无虑的时光</div></div></section><section class=\"list-item\"><div class=\"item-img\"><img src=\"./桌面04.jpg\" alt=\"img-04\"></div><div class=\"item-text\"><div class=\"text-title\">「冰菓」</div><div class=\"text-desc\">好奇宝宝 我很好奇你能告诉我吗</div></div></section></main></body></html>
