极具视觉冲击力的3D卡片效果,你能实现嘛

子辰发现了一个炫酷的3D卡片效果,这样的效果实现起来,你有没有思路呢?

接下来我们一起来看一下这个效果的实现过程。

首先看它的 HTML 代码:

html 复制代码
<div class="card">
  <!-- 封面 -->
  <img src="./assets/cover1.jpeg" class="cover" />
  <!-- 标题 -->
  <img src="./assets/title1.png" class="title" />
  <!-- 英雄 -->
  <img src="./assets/hero1.webp" class="hero" />
</div>
<div class="card">
  <img src="./assets/cover2.jpeg" class="cover" />
  <img src="./assets/title2.png" class="title" />
  <img src="./assets/hero2.webp" class="hero" />
</div>

HTML 的代码非常简单,就两个 div 分别代表两张卡片。

每个 div 里有三个图片,分别是封面、标题以及英雄,三张图片分别设置了不同的类样式。

然后再来看一下基本样式:

css 复制代码
/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* body 设置 flex 为了让图片居中 */
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 背景色先设置为白色看的清楚 */
  /* background: #191c29; */
  background: #fff;
}

/* 设置每张卡片的基本样式,然后向上移动一点 */
.card {
  width: 200px;
  height: 300px;
  margin: 0 50px;
  transform: translateY(-50%);
  position: relative;
}

我们首先来做一下布局,由于卡片里边有三张图片,这三张图片有覆盖关系,所以三张图片应该是绝对定位,卡片我们已经设置了相对定位。

然后我们为图片设置一下公共样式:

css 复制代码
/* etc... */
.card img {
  position: absolute;
  left: 0;
  width: 100%;
  /* 因为图片的效果是有过渡的,我们在这里也统一设置一下 */
  transition: 0.5s;
}

设置完之后效果就是这个样子的:

那么接下来就是分别设置每一张图片了:

css 复制代码
/* etc... */
.cover {
  height: 100%;
  z-index: 1;
}

.hero {
  height: 100%;
  z-index: 2;
  /* 英雄在最初是不可见的 */
  opacity: 0;
}

.title {
  z-index: 3;
  bottom: 0;
}

因为覆盖关系是标题在最上层,英雄在中层,封面在下层,所以我们使用 z-index 设置它们的覆盖关系。

然后接下来就是 hover 效果了,一个一个来。

首先是 cover 它要进行旋转:

css 复制代码
/* etc... */
.card:hover .cover {
  /* 设置旋转 */
  transform: rotateX(25deg);
}

旋转有了但是没有 3D 的效果,我们加一下:

css 复制代码
/* etc... */
.card:hover .cover {
  /* 设置 3D 透视 */
  transform: perspective(500px) rotateX(25deg);
}

然后我们再加一下阴影:

css 复制代码
/* etc... */
.card:hover .cover {
  transform: perspective(500px) rotateX(25deg);
  /* 设置阴影 */
  box-shadow: 0 35px 0px rgba(0, 0, 0, 0.75);
}

现在阴影太大,太实了,所有要内缩和虚化一下:

css 复制代码
/* etc... */
.card:hover .cover {
  transform: perspective(500px) rotateX(25deg);
  /* 阴影虚化 35px 然后内缩 -8px */
  box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 0.75);
}

现在就有点那个味道了。

然后我们写下一个 hero 英雄:

css 复制代码
/* etc... */
.card:hover .hero {
  /* 透明度设置为不透明 */
  opacity: 1;
  /* 同样设置 3D 效果,然后横向不移动,纵向向上移动 50px,z 轴上靠近我们的眼睛一点设置 50px */
  transform: perspective(500px) translate3d(0, -50px, 50px);
}

最后就是 title 标题了,标题和英雄基本一致,只不过向上移动少一点:

css 复制代码
/* etc... */
.card:hover .title {
  /* 设置 3D 效果,,然后横向不移动,纵向向上移动 25px,z 轴上靠近我们的眼睛一点设置 50px */
  transform: perspective(500px) translate3d(0, -25px, 50px);
}

最后把背景色加上就完美实现了:

css 复制代码
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #191c29;
}

.card {
  width: 200px;
  height: 300px;
  margin: 0 50px;
  transform: translateY(-50%);
  position: relative;
}

.card img {
  position: absolute;
  width: 100%;
  left: 0;
  transition: 0.5s;
}

.cover {
  height: 100%;
  z-index: 1;
}

.card:hover .cover {
  transform: perspective(500px) rotateX(25deg);
  box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 0.75);
}

.hero {
  height: 100%;
  z-index: 2;
  opacity: 0;
}

.card:hover .hero {
  opacity: 1;
  transform: perspective(500px) translate3d(0, -50px, 50px);
}

.title {
  z-index: 3;
  bottom: 0;
}

.card:hover .title {
  transform: perspective(500px) translate3d(0, -25px, 50px);
}

总结

今天的东西比较简单,我们娱乐放松一下。

如果有需要素材的同学可以关注子辰并私信,子辰会将素材发送给你。

本文来源

本文来源自渡一官方公众号:Duing ,欢迎关注,获取最新最全最深入的技术讲解

感谢你阅读本文,如果你有任何疑问或建议,请在评论区留言,如果你觉得这篇文章有用,请点赞收藏或分享给你的朋友!

相关推荐
gqkmiss9 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃15 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰19 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye25 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm28 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js