<!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. Springboot快速集成阿里云RocketMq

    前言 随着互联网的兴起,越来越多的用户开始享受科技带来的便利,对于服务的压力也日益增大,随即便有了高并发.高性能.高可用等各种解决方案,这里主要介绍RocketMq的集成方法.(文末附源码地址) 正文 ...

  2. python tkinter 使用(七)

    python tkinter 使用(七) 本篇文章主要讲下tkinter 中的message 控件. Message控件可以用于在窗口中显示一段文本消息. 以下是个简单的例子: #!/usr/bin/ ...

  3. 【OpenCV】【Python】关于cv2.findContours()轮廓索引（编号）解析（RETR_TREE）

    在打算自己实现二维码的定位的时候,看到了相关博文的关于cv2.findContours返回的层级信息来定位三个"回"字从而达到定位二维码的目的,但是返回的hierarchy中的层级 ...

  4. 基于QT环境下，实现客户端红外采集人体向服务端通信。

    一.本次测试目的 基于QT环境下STM32人体红外检测,实现客户端红外采集到信息向服务端通信. 二.功能 (1).传入音乐,当服务端接收到信息时,打开音乐    (2).在服务端上面显示图片,当接收到 ...

  5. vulntarget-d-wp

    vulntarget-d 配置信息 系统 ip kali 192.168.130.5 ubuntu 18 ip1: 192.168.130.8 ip2: 10.0.10.1 win7 10.0.10. ...

  6. buuctf 加固题 babypython WriteUp

    原题wp参考链接:https://www.cnblogs.com/karsa/p/13529769.html 这是CISCN2021 总决赛的题,解题思路是软链接zip 读取文件,然后伪造admin的 ...

  7. 云小课｜MRS基础操作之集群健康检查

    本文分享自华为云社区<云小课|MRS基础操作之集群健康检查>,作者:阅识风云. 阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视 ...

  8. 云小课 | 玩转HiLens Studio之手机实时视频流调试代码

    摘要:在开发技能过程中,搭配视频流调试技能是非常必要的环节,也是检验技能效果的重要环节.HiLens Studio推出使用手机实时视频流调试代码的功能,以手机摄像头实时的视频流作为技能输入,查看技能输 ...

  9. 想从单体架构演进到分布式架构，SBA 会是一个不错的选择

    摘要:SBA 可以看成是单体架构和微服务架构之间的一个折中方案,它也是按照业务领域进行服务划分,但服务划分的粒度相比微服务要更粗.从单体架构演进到 SBA,会比直接演进到微服务架构更加容易. 本文分享 ...

  10. 如何构建面向海量数据、高实时要求的企业级OLAP数据引擎？

    在字节跳动各产品线飞速成长的过程中,对数据分析能力也提出了更高的要求,现有的主流数据分析产品都没办法完全满足业务要求.因此,字节跳动在ClickHouse引擎基础上重构了技术架构,实现了云原生环境的部 ...