<!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+springsecurity+redis+fastjson

    尚医通 [基于若依快速开发医疗系统] 主要内容 学习目标 项目简介 一款医疗平台. 系统包含:系统管理.药品进销存管理.看病就诊.收费管理.检查管理.数据统计等. 涉及技术 SpringBoot.My ...

  2. MinIO客户端之stat

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

  3. HTML5 Video 控件如何使用?

    HTML5 提供了 <video> 元素,用于在网页上嵌入和播放视频.以下是如何使用HTML5 <video> 控件的基本步骤: 添加<video>元素: 在HTM ...

  4. [极客大挑战 2019]EasySQL 1

    [极客大挑战 2019]EasySQL 1 观察题目,发现为登录界面,判断这道题的考点是SQL注入. 知识点 万能密码 知识点原理 当用户尝试登录时 网站后台会进行SQL查询,比如 [select * ...

  5. Mybatis源码1JDBC->mybatis主要流程->mybatis Excutor简介

    === 一丶mybatis概述 MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作.My ...

  6. 微信小程序常用代码

    在微信小程序中,可以使用 wx.showToast.wx.showLoading 和 wx.showModal 等方法来显示不同类型的提示框 wx.showToast:用于显示一条浮动的提示框,一般用 ...

  7. row_number函数的不稳定性

    本文分享自华为云社区<row_number函数的不稳定性>,作者: nullptr_ . row_number为窗口函数,用来为各组内数据生成连续排号 基础用法 postgres=# se ...

  8. 网络性能总不好？网络调优专家AOE帮你来“看看”

    摘要:为提升网络性能.降低人工调优成本,CANN推出了自动化网络调优工具AOE,通过子图调优.算子调优与梯度调优的功能,让网络可以在AI硬件上获得最佳性能. 本文分享自华为云社区<网络性能总不好 ...

  9. 什么？语音合成开源代码不会跑，follow me！

    摘要:本文描述的深度神经网络模型结构:: Natural TTS synthesis by conditioning Wavenet on MEL spectogram predictions. 本文 ...

  10. 快来一起玩转LiteOS组件：Curl

    摘要:Curl是一个文件传输工具,常用于数据上传和下载,本demo基于Cloud_STM32F429IGTx_FIRE开发板演示了在curl demo中调用curl提供的API来下载一个文件,并将其保 ...