<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>视差滚动</title>

    <style>

      * {

        box-sizing: border-box;

      }

      html,

      body {

        margin: 0;

        padding: 0;

      }

      html{

          overflow: hidden;

      }

      body {

        height: 100vh;

        /* 开启3d */

        perspective: 100px;

        transform-style: preserve-3d;

        overflow-y: auto;

      }

      .main {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

      }

      .list-item {

        position: relative;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;

        height: 45vh;

        overflow: hidden;

      }

      .list-item:hover .item-image::before {

        background-color: rgba(0, 0, 0, 0.2);

      }

      .item-image {

        position: absolute;

        width: 100%;

        height: 100%;

        z-index: -1;

        transform: translateZ(-50px) scale(2.4);

      }

      .item-image::before {

        content: "";

        display: block;

        position: absolute;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.4);

        transition: all 0.3s ease;

      }

      .item-image img {

        display: block;

        width: 100%;

        height: 100%;

        /* object-fit 需要设定尺寸 */

        object-fit: cover;

      }

      .item-text {

        color: #fff;

        text-align: center;

        font-family: "Courier New", Courier, monospace;

      }

      .text-title {

        font-size: 2rem;

        font-weight: bolder;

        margin-bottom: 20px;

      }

      .text-desc {

        font-size: 1.2rem;

      }

    </style>

  </head>

  <body>

    <div class="main">

      <div class="list-item">

        <div class="item-image">

          <img src="./img/4.png" alt="" />

        </div>

        <div class="item-text">

          <div class="text-title">CSS3D动画</div>

          <div class="text-desc">

            采用 animation + transition 组合完成各种动画加过渡效果

          </div>

        </div>

      </div>

      <div class="list-item">

        <div class="item-image">

          <img src="./img/2.jpg" alt="" />

        </div>

        <div class="item-text">

          <div class="text-title">CSS3D动画</div>

          <div class="text-desc">

            采用 animation + transition 组合完成各种动画加过渡效果

          </div>

        </div>

      </div>

      <div class="list-item">

        <div class="item-image">

          <img src="./img/3.jpg" alt="" />

        </div>

        <div class="item-text">

          <div class="text-title">CSS3D动画</div>

          <div class="text-desc">

            采用 animation + transition 组合完成各种动画加过渡效果

          </div>

        </div>

      </div>

      <div class="list-item">

        <div class="item-image">

          <img src="./img/5.jpg" alt="" />

        </div>

        <div class="item-text">

          <div class="text-title">CSS3D动画</div>

          <div class="text-desc">

            采用 animation + transition 组合完成各种动画加过渡效果

          </div>

        </div>

      </div>

      <div class="list-item">

        <div class="item-image">

          <img src="./img/6.jpg" alt="" />

        </div>

        <div class="item-text">

          <div class="text-title">CSS3D动画</div>

          <div class="text-desc">

            采用 animation + transition 组合完成各种动画加过渡效果

          </div>

        </div>

      </div>

      <div class="list-item">

        <div class="item-image">

          <img src="./img/1.jpg" alt="" />

        </div>

        <div class="item-text">

          <div class="text-title">CSS3D动画</div>

          <div class="text-desc">

            采用 animation + transition 组合完成各种动画加过渡效果

          </div>

        </div>

      </div>

    </div>

  </body>

</html>

出处: https://www.bilibili.com/video/BV1Yt4y127Ds?from=search&seid=1888009266108241519

CSS - 使用CSS 3D属性来完成页面视差滚动效果。的更多相关文章

  1. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  2. 分享一款页面视差滚动切换jquery.localscroll插件

    今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...

  3. [Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. CSS完成视差滚动效果

    一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...

  5. JS学习笔记之页面信息滚动效果

    效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...

  6. Skrollr.js -- 使用Skrollr创建视差滚动效果页面

    使用方法:  http://www.helloweba.com/view-blog-262.html http://www.uedsc.com/skrollr.htmlhttp://www.hello ...

  7. js实现页面消息滚动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  9. 使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

  10. H5_0026：使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

随机推荐

  1. python tkinter 使用（六）

    python tkinter 使用(六) 本文主要讲述tkinter中进度条的使用. 1:确定的进度条 progressbar = tkinter.ttk.Progressbar(root, mode ...

  2. 【Python】【OpenCV】定位二维码

    相较于BarCode,QRCode有明显的特征区域,也就是左上角.右上角.左下角三个"回"字区域,得益于hierarchy中,父子关系的轮廓是连续的(下标),所以这个时候我们就可以 ...

  3. Python笔记一之excel的读取

    本文首发于公众号:Hunter后端 原文链接:Python笔记一之excel的读取 这里我常用的 python 对于 excel 的读取库有两个,一个是 xlsxwriter 用于操作 excel 的 ...

  4. 2023.2 IDEA安装激活教程

    1.下载安装IntelliJ IDEA 先去官网下载,我这里下载的是最新版本的2023.2,测试过2023最新版本以及2022版本以上的版本没问题. 安装然后打开 提示要输入激活码,先关闭应用,等下再 ...

  5. 2.elasticsearch中的mapping

    mapping 顾名思义,代表了映射关系.是文档中字段和数据类型的映射关系 为什么要了解mapping 虽然elasticsearch中已尽有的动态mapping(Dynamic Mapping),而 ...

  6. WPF通用权限平台系统，正在研发中(基本于：VS2019 WPF+Devexpress21.2)

    WPF通用权限平台系统,正在研发中(基本于:VS2019 WPF+Devexpress21.2) 开发工具:VS2019 C# WPF 第三方工具:Devexpress21.2 数据库:SQLServ ...

  7. 通过JDK动态代理类实现一个类中多种方法的不同增强

    1.为什么说JDK动态代理必须要实现当前父接口才能使用 JDK动态代理是基于接口的代理,它要求目标类(被代理的类)必须实现一个或多个接口.这是因为JDK动态代理是通过创建目标类的接口的代理对象来实现的 ...

  8. javaGUI入门之swing（一）

    javaGUI入门之swing(一) 前面学过javafx,发现他们有"异曲同工"之处,demo写起来也类似,无非是类名不一样.个人觉得实现一个桌面应用不应该只看用一种语言一种框架 ...

  9. Java异常处理之数字溢出问题

    在进行 Java 开发时,经常会遇到数字溢出的问题.这个问题在很多程序中都非常常见,尤其是在进行数值计算的时候.Java 中提供了一种异常机制来处理这种情况,我们可以在代码中使用 try-catch ...

  10. Feign传递参数

    传递单个参数 1客户端 @RequestMapping("/one") public BaseResp one(@RequestParam("id") Inte ...