<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>滚轮视差效果</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 200vh;
overflow-x: hidden;
}
.background {
background-image: url("mountain\ range.jpg");
background-size: cover;
background-position: 50% 50%;
height: 200vh;
font: 900 10rem "";
line-height: 130vh;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
text-align: center;
overflow: hidden;
}
.background::before {
content: "";
b
html++js+css实现滚动视差效果
于 2022-05-01 19:52:54 首次发布