今天我们来讲讲上面是视觉差的滑动吧先看一下效果图,他是通过3d空间让移动速度不一样导致的,其实这里视差效果没有那么强。但是你和下面作对比效果就强了;
一、准备代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin:0;
padding:0;
}
body{
height: 100vh;
width: 100%;
background-color:cadetblue;
}
div:first-of-type{
position:relative;
width: 100%;
height: 100vh;
background: url(banner.jpg) no-repeat left top / cover;
}
div:first-of-type::after{
content:"视差滑动";
display:block;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
color: white;
padding:35px 10px;
background: rgba(0,0,0,0.9);
font-size: 3em;
letter-spacing: 10px;
}
div:last-of-type{