如何用css做出酷炫的视差滚动效果

复制代码
<!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>
       div {
        height: 100vh;
        background: rgba(0, 0, 0, .7);
        color: #fff;
        line-height: 100vh;
        text-align: center;
        font-size: 20vh;
        }
        .a-img1 {
        background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
        }
        .a-img2 {
        background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
        }
        .a-img3 {
        background-image: url("https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg");
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
        }
       </style>
</head>
<body>
       <div class="a-text">1</div>
       <div class="a-img1">2</div>
       <div class="a-text">3</div>
       <div class="a-img2">4</div>
       <div class="a-text">5</div>
       <div class="a-img3">6</div>
       <div class="a-text">7</div>
</body>
</html>
相关推荐
SunTecTec24 分钟前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
软件技术NINI25 分钟前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
拉不动的猪1 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程2 小时前
ES练习册
java·前端·elasticsearch
Asthenia04122 小时前
Netty编解码器详解与实战
前端
袁煦丞2 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛3 小时前
vue组件间通信
前端·javascript·vue.js
一笑code3 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员4 小时前
layui时间范围
前端·javascript·layui
NoneCoder4 小时前
HTML响应式网页设计与跨平台适配
前端·html