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属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...
随机推荐
- cookie和session的一些疑惑以及ai解答
我: 那么当浏览器关闭的时候,当再次访问这个地址的时候,为什么之前设置的cookie没有被删除掉?而且按照你说的这次可能会生成一个新的sessionID,那么cookie里面的其他数据,它是如何获取上 ...
- Java数组中常见的方法
一.前言 代码: //给定一个数组 int[] arr = {234,312,32,1321,321,43}; int[] arr1 = new int[6]; int[] arr2 = {1,3,7 ...
- MySQL篇：第三章_详解DQL语言
DQL语言的学习 基础查询 一.语法: SELECT 要查询的东西 [FROM 表名]; 类似于Java中 :System.out.println(要打印的东西); 特点: ①通过select查询完的 ...
- 当创建statefulset资源后，k8s组件如何协作
本文分享自华为云社区<当创建StatefulSet后,k8s会发生什么?>,作者:可以交个朋友 . 一.StatefulSet介绍 StatefulSet 是用来管理有状态应用的工作负载对 ...
- 跟着B站UP主小姐姐去华为坂田基地采访扫地僧
摘要:谁说程序员就只能写代码呢!华为扫地僧的才艺是完全可以solo出道的那种. 忍不住想要和你们分享下我9月份的快乐呀!Mark下最近完成的一件超了不起的事情!我去你们口中别人家的公司-华为啦!这次采 ...
- 云图说｜图解开天企业工作台MSSE
摘要:开天企业工作台是面向企业用户的一站式数字工作台. 本文分享自华为云社区<[开天aPaaS]图解开天企业工作台MSSE>,作者:开天aPaaS小助手. 开天企业工作台(MacroVer ...
- 论文解读丨Zero-Shot场景下的信息结构化提取
摘要:在信息结构化提取领域,前人一般需要基于人工标注的模板来完成信息结构化提取.论文提出一种zero-shot的基于图卷积网络的解决方案,可以解决训练集和测试集来自不同垂直领域的问题. 本文分享自华为 ...
- 华为云GaussDB专家走进课堂，跟莘莘学子聊聊数据库
摘要:华为云GaussDB走进北邮,技术专家走进课堂带来数据库前沿资讯. 近期,各地疫情又一次席卷而来,居家隔离成为常态.不过,外出的不便并没有阻挡莘莘学子求知的渴望,线上课堂成为了大多学生上课的主要 ...
- NDPQ(NDP+PQ)，定义分布式数据库新方向
摘要:云服务提供商构建新的云原生关系数据库系统,专门为云基础架构设计,通常采用将计算和存储分离到独立扩展的分布式层的设计. 本文分享自华为云社区<性能提升100倍!GaussDB(for MyS ...
- 火山引擎云原生数据仓库 ByteHouse 技术白皮书 V1.0 （Ⅳ）
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,<火山引擎云原生数据仓库 ByteHouse 技术白皮书>正式发布.白皮书简述了 ByteHou ...