我的名片|「青训营 X 码上掘金」主题创作

当青训营遇上码上掘金

一、名片布局

一张简单的名片通常包括三部分，那就是头像、姓名（昵称）、工作和联系方式，借助我的校卡排版格式，我将我的名片分为上下两部分，上面这部分是我的掘金头像，下面这部分是包含掘金ID、学习的方向和我的qq邮箱，在页面的书写上比较简单，就是一个img元素和一些标签，将card用container包裹起来，card下面img显示图片，h1显示名字，h2显示学习方向，p显示联系方式，写了两组card，目的是实现翻转效果，下面是我的html部分

<div class="container">
  <div class="card front">
    <img src="https://p3-passport.byteimg.com/img/user-avatar/f0c0c17abda18a3b84b77e3151930958~180x180.awebp" alt="Profile Picture">
    <h1>光年通心</h1>
    <h2>前端方向</h2>
    <p>Email: mzt2001@qq.com</p >
  </div>
  <div class="card rear">
    <img src="https://p3-passport.byteimg.com/img/user-avatar/f0c0c17abda18a3b84b77e3151930958~180x180.awebp" alt="Profile Picture">
    <h1>光年通心</h1>
    <h2>前端方向</h2>
    <p>Email: mzt2001@qq.com</p >
  </div>
</div>

二、样式效果

我的名片长宽分别是300像素和400像素，加上了shadow效果，图片占满整个宽度，图片部分和文字部分基本上各占一半，比较简洁，下面是我的css部分代码

.card {
  width: 300px;
  height: 400px;
  box-shadow: 0px 0px 10px #ccc;
  text-align: center;
  transition: all .5s;
  position: absolute;
  backface-visibility: hidden;
}
.rear{
  transform: rotateY(-180deg);
}
img {
  width: 100%;
}
​

三、交互效果

为了让名片更加有趣，我适当的加上了一些交互效果，我为我的名片增加了点击事件，点击之后有一个翻转效果，从而实现动画效果，为了实现这个效果，需要写两次名片，充当正反面，正面显示的时候反面隐藏，反面显示的时候正面隐藏，使用绝对定位将两个盒子重叠，使用rotateY(-180deg)将卡片反面先翻面，使用backface-visibility: hidden;可以使卡片反面背面朝向用户时不可见。给名片添加两个点击事件，使两个盒子各翻转，下面是我的js部分代码

const frontEl = document.querySelector(".front");
const rearEl = document.querySelector(".rear");
frontEl.addEventListener("click", () => {
  frontEl.style.transform = "rotateY(180deg)";
  rearEl.style.transform = "rotateY(0deg)";
});
rearEl.addEventListener("click", () => {
  rearEl.style.transform = "rotateY(-180deg)";
  frontEl.style.transform = "rotateY(0deg)";
});

四、效果演示

下面是码上掘金的效果展示 code.juejin.cn/pen/7200058…