CSS - 使用CSS 3D属性来完成页面视差滚动效果。
<!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属性来完成页面视差滚动效果。的更多相关文章
- css实现视差滚动效果
今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...
- 分享一款页面视差滚动切换jquery.localscroll插件
今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...
- [Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- CSS完成视差滚动效果
一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...
- JS学习笔记之页面信息滚动效果
效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...
- Skrollr.js -- 使用Skrollr创建视差滚动效果页面
使用方法: http://www.helloweba.com/view-blog-262.html http://www.uedsc.com/skrollr.htmlhttp://www.hello ...
- js实现页面消息滚动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- 使用CSS里的user-select属性控制用户在页面上选中的内容
CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...
- H5_0026：使用CSS里的user-select属性控制用户在页面上选中的内容
CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...
随机推荐
- 山海鲸Cesium：用更简单的方式升级视效
CesiumJS作为绝大多数人都在用的开源地球可视化引擎,视觉效果并不拔尖,这让很多giser都想着有一天升级一下视效,从众多平庸的项目中脱颖而出.然而,对于一些使用Cesium的项目来说,要想达到C ...
- MyBatis 源码解析
本文源码解析针对的是 MyBatis 3.4.4 MyBatis 执行流程 第一阶段 MyBatis 在这个阶段获得 Mapper 的动态代理对象,具体逻辑如下图所示: 其中,Configuratio ...
- 将一个服务器通过HTTP请求另一个服务器
1.一个服务器访问另一个服务器(不传参) @RequestMapping ("/test") public ResponseEntity<String> serverT ...
- GDAL数据集写入空间坐标参考
目录 1. 概述 2. 栅格数据 3. 矢量数据 1. 概述 可以通过GDAL给地理数据写入空间参考信息,不过要注意的是GDAL给矢量数据和栅格数据写入空间坐标参考的接口不太一样. 2. 栅格数据 实 ...
- PB从入坑到放弃（七）PBer们的福音来了
写在前面 也许现在的你需要用PB完成毕业设计.需要维护远古时代的代码,又或者是你呆的公司就是要求要用PB开发项目. 不管你是出于什么原因还在使用PB,不可否认PB在数据窗口非常优秀,熟练使用之后开发数 ...
- Rust太难？那是你没看到这套Rust语言学习万字指南！
摘要:从开发环境.语法.属性.内存管理和Unicode等五部分,为你带来一份详细的Rust语言学习的精华总结内容. 一.Rust开发环境指南 1.1 Rust代码执行 根据编译原理知识,编译器不是直接 ...
- 基于ModelArts进行流感患者密接排查
摘要:针对疫情期间存在的排查实时性差.排查效率低.无法追踪密接者等问题,可以使用基于YOLOv4的行人检测.行人距离估计.多目标跟踪的方案进行解决. 本文分享自华为云社区<基于ModelArts ...
- MySQL事务处理特性的实现原理
摘要:事务这个词来自于英语中的transactional这个词的翻译,这个词的含义更多的是指 "交易".在数据库系统或者软件系统中我们通常 称 transactional 为事务 ...
- 实例讲解将Graph Explorer搬上JupyterLab
摘要:基于 Graph Explorer 在 Jupyter 上进行图探索,可以大大降低编码成本,丰富 JupyterLab 的数据表现力. 本文分享自华为云社区<将 Graph Explore ...
- 数据智能——DTCC2022！中国数据库技术大会即将开幕
关注DTCC有几年了,还是在当中学到了很多的干货.今年我的大部分时间也都是投入在了数据治理的学习和数据治理工具的调研中.也非常渴望有这种机会去了解一下国内顶尖公司这方面的前沿技术与应用. DTCC ...