<!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. ElasticSearch之Index modules

    索引的参数,分为两类: 静态参数,仅支持在创建索引时指定,或者关闭索引后指定. 动态参数,允许在索引工作期间指定或者修改. 静态参数 index.number_of_shards 默认值为1. 本参数 ...

  2. 如何使用Redisson实现分布式锁？

    在分布式系统中,当多个线程(或进程)同时操作同一个资源时,为了保证数据一致性问题,所以就需要一种机制来确保在同一时间只有一个线程(或进程)能够对资源进行修改,这就是分布式锁的作用. 分布式锁是一种在分 ...

  3. 【推荐】后现代风格文本编辑器-Helix

    目录 Helix简介 Helix 安装 Linux平台 Ubuntu Fedora/RHEL Arch Linux extra NixOS Flatpak Snap AppImage macOS系统 ...

  4. springboot整合hibernate(非JPA)（一）

    springboot整合hibernate(非JPA)(一) springboot整合hibernate,非jpa,若是jpa就简单了,但是公司项目只有hibernate,并要求支持多数据库,因此记录 ...

  5. JPA复杂查询时间查询分页排序

    JPA复杂查询时间查询分页排序 JPA复杂查询时间查询分页排序,工作上用到,因为项目是jpa,记录.代码囊括了:查询条件+时间范围+分页+排序 其实我也不太想用jpa,但是他也有优点,操作可以兼容多种 ...

  6. Reactor 简介

    官方的介绍如下: Reactor is a fully non-blocking reactive programming foundation for the JVM, with efficient ...

  7. flutter中InheritedWidget共享数据

    InheritedWidget是Flutter框架中用于在Widget树中共享数据的机制.它是一个特殊的Widget,可以将其放置在Widget树的上层,并向下传递共享的数据给其子Widget.子Wi ...

  8. 一文带你了解华为云GaussDB的五大黑科技

    摘要:在华为开发者大会2021(HDC·Cloud)中,华为云数据库多位技术专家分享了GaussDB系列数据库全新5大黑科技. 4月24-26日,华为开发者大会2021(HDC·Cloud)在深圳隆重 ...

  9. 解析Stream foreach源码

    摘要:串行流比较简单,对于parallelStream,站在它背后的是ForkJoin框架. 本文分享自华为云社区<深入理解Stream之foreach源码解析>,作者:李哥技术 . 前言 ...

  10. SQL操作：WITH表达式及其应用

    摘要:本文将围绕WITH,以及更高阶的WITH RECURSIVE表达式介绍其语法特征和具体使用规范,以及在GaussDB(DWS)中如何进行WITH表达式的调优 本文分享自华为云社区<Gaus ...