极具视觉冲击力的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 ,欢迎关注,获取最新最全最深入的技术讲解

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

相关推荐
阿伟来咯~10 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端15 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱18 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai27 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨28 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js