<!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. ChatGPT API来了 附调用方法及文档

    3月1日,OpenAI 放出了ChatGPT API(GPT-3.5-turbo 模型),1000个tokens为$0.002美元,等于每输出 100 万个单词,价格才 2.7 美金(约 18 元人民 ...

  2. MinIO客户端之stat

    MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc stat 获取指定桶或者对象的信息,包含对象的元数据. 指定桶bkt1,查看信息,命令如下: ./mc st ...

  3. 珍藏网站-关于路由器、WIFI协议等

    路由器详解:为什么不要买AX3000路由器 https://zhuanlan.zhihu.com/p/403855533 包含以下专业名词和相关话题: RX/TX和MU-MIMO 20MHz/40MH ...

  4. Android 事件分发介绍

    目录 一.目的 二.环境 三.相关概念 3.1 事件分发 四.详细设计 4.1应用布局 4.1.1 应用布局结构 4.1.2 LayoutInspector 4.2 关键View&方法 4.2 ...

  5. 从C++CLI工程的依赖库引用问题看.Net加载程序集机制

    问题 最近在为某第三方MFC项目写C++/CLI工程插件时遇到了如下一个问题: MFC的工程不允许把.Net的依赖程序集放到执行程序的目录(防止影响其稳定性),依赖库只能放到非执行程序子目录的其他目录 ...

  6. LeetCode 数、二叉树、二叉搜索树篇(94、144、145)

    94. 二叉树的中序遍历 给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 2 / 3 输出: [1,3,2] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? / ...

  7. 多模态AI开发套件HiLens Kit：超强算力彰显云上实力

    摘要:Huawei HiLens Kit是一款端云协同多模态AI开发套件,支持图像.视频.语音等多种数据分析与推理计算,可广泛用于智能监控.智能家庭.机器人.无人机.智慧工业.智慧门店等分析场景. 在 ...

  8. 打破联接壁垒，华为云IoT到底强在哪

    摘要:先哲说,万物莫不相异,而在今天,万物也可相通. 本文分享自华为云社区<打破联接壁垒,华为云IoT到底强在哪?>,作者:华为IoT云服务. "凡物莫不相异", 是十 ...

  9. 一文详述DMS资源池队列阻塞告警及原理

    摘要: 本文主要对DMS资源池队列阻塞告警进行介绍,以及对其背后涉及的内核原理进行介绍. 本文分享自华为云社区<DMS资源池队列阻塞告警及原理介绍>,作者: codefulture. 一. ...

  10. html5鼠标拖动排序及resize实现方案分析及实践

    对列表进行拖动排序,尺寸改变.之前一般会使用jQuery-UI.其通过mousedown.mousemove.mouseup这三个事件来实现页面元素被鼠标拖拽的效果.vue-drag-resize v ...