CSS: 视差滚动页
程序员文章站
2024-02-25 14:34:21
...
具体效果粘贴代码运行:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>视差滚动页</title>
<style>
body,html{
height: 100%;
margin: 0;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.8em;
color: #666;
}
.pimg1, .pimg2, .pimg3, .pimg4{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* 视差效果的关键 */
background-attachment: fixed;
}
.pimg1{
background-image: url('city.jpg');
min-height: 100%;
}
.pimg2{
background-image: url('city2.jpg');
min-height: 400px;
}
.pimg3{
background-image: url('city3.jpg');
min-height: 400px;
}
.pimg4{
background-image: url('city4.jpg');
min-height: 100%;
}
.section{
text-align: center;
padding: 50px 80px;
}
.section-light{
background: #f4f4f4;
color: #666;
}
.section-dark{
background: #282e34;
color: #ddd;
}
.ptext{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #ddd;
font-size: 27px;
font-weight: bold;
letter-spacing: 8px;
text-transform: uppercase;
}
.pimg1 .ptext .border,
.pimg4 .ptext .border{
background: #111;
color: #fff;
padding: 10px 20px;
}
@media(max-width: 500px) {
.pimg1, .pimg2, .pimg3, .pimg4{
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">
生活
</span>
</div>
</div>
<section class="section section-light">
<h2>酸甜苦辣</h2>
<p>有些人其实你已经见过Ta最后一面了。</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">
爱情
</span>
</div>
</div>
<section class="section section-dark">
<h2>爱的尽头</h2>
<p>我和你之间的距离渐行渐远,却心中仍然有你的位置。</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">
亲情
</span>
</div>
</div>
<section class="section section-light">
<h2>别与离</h2>
<p>亲人是我活下去的唯一希望。</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border">
小时候的过年,将是我一辈子最珍贵的记忆.
</span>
</div>
</div>
</body>
</html>
其中,主体骨架就是:
<div class="pimg1">
<div class="ptext">
<span class="border">
生活
</span>
</div>
</div>
<section class="section section-light">
<h2>酸甜苦辣</h2>
<p>有些人其实你已经见过Ta最后一面了。</p>
</section>
上一篇: gulp--快速入门