Html+Css实现视觉差滚动效果
1、通过对多个元素块设置背景不随页面的滚动从而达到给观看的人形成一种视觉差的效果。
background-attachment: fixed; /*设置背景不随页面滚动而移动*/
background-size: cover; /*设置背景图片的大小,cover属性会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小*/
2、完整代码如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: relative;
width: 100%;
height: 300px;
background-color:teal;
margin-bottom: 10px;
text-align: center;
background-attachment: fixed;
}
.tp1 div{
position: absolute;
width: 200px;
height: 250px;
right: 10px;
top: 20px;
}
.tp2 ul{
display: block;
position: absolute;
width: 400px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.tp2 ul li{
display: block;
line-height: 50px ;
float: left;
padding: 0 20px;
}
.tp3 div{
position: absolute;
width: 200px;
height: 250px;
left: 10px;
top: 20px;
}
.tp4 div{
position: absolute;
width: 200px;
height: 250px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.tp5 ul{
display: block;
position: absolute;
width: 400px;
height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.tp5 ul li{
display: block ;
float: left;
height: 80px;
width: 80px;
margin: 0 20px ;
}
.tp1{
background-image: url(http://pic1.win4000.com/wallpaper/e/599ce1e549968.jpg);
background-size: cover;
}
.tp2{
background-image: url(https://img9.51tietu.net/pic/2019-091017/jc4equxu413jc4equxu413.jpg);
background-size: cover;
}
.tp3{
background-image: url(http://pic1.win4000.com/wallpaper/8/5850de532eaf9.jpg);
background-size: cover;
}
.tp4{
background-image: url(http://pic1.win4000.com/wallpaper/6/58d5feabc7869.jpg);
background-size: cover;
}
.tp5{
background-image: url(http://pic.netbian.com/uploads/allimg/200628/005907-1593277147b968.jpg);
background-size: cover;
}
</style>
</head>
<body>
<div class="tp1">
<div>
<strong>Lorem ipsum dolor sit,</strong>
amet consectetur adipisicing elit.
Voluptatem consectetur eaque veritatis minus hic velit quae,
voluptas, laboriosam sint magnam molestiae tempora officia saepe.
Temporibus labore accusantium omnis aut nisi.
</div>
</div>
<div class="tp2">
<ul>
<li>Voluptatem</li>
<li>Veritatis</li>
<li>Molestiae</li>
</ul>
</div>
<div class="tp3">
<div>
<strong>Lorem ipsum dolor sit,</strong>
amet consectetur adipisicing elit.
Voluptatem consectetur eaque veritatis minus hic velit quae,
voluptas, laboriosam sint magnam molestiae tempora officia saepe.
Temporibus labore accusantium omnis aut nisi.
</div>
</div>
<div class="tp4">
<div>
<strong>Lorem ipsum dolor sit,</strong>
amet consectetur adipisicing elit.
Voluptatem consectetur eaque veritatis minus hic velit quae,
voluptas, laboriosam sint magnam molestiae tempora officia saepe.
Temporibus labore accusantium omnis aut nisi.
</div>
</div>
<div class="tp5">
<ul>
<li>Voluptatem</li>
<li>Veritatis</li>
<li>Molestiae</li>
</ul>
</div>
</body>
</html>
3、效果如下所示。