一张简约的名片 | 「青训营 X 码上掘金」

Desain
106 阅读3分钟

当青训营遇上码上掘金

前言

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情，所以就试着写了一张简约的名片。

具体实现

HTML部分

HTML的部分只通过简单的嵌套展示了卡片的正面与反面的内容，整体看上去还十分简单，甚至不像一张卡片，接着就可以开始为卡片添加样式了~

image.png

<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="avatar"></div>
      <div class="info">
        <h2>时光</h2>
        <p>给我一段老时光，独坐在绿苔滋长的木窗下，泡一壶闲茶。不去管，那南飞燕子，何日才可以返家。不去问，那一叶小舟，又会放逐到哪里的天涯。不去想，那些走过的岁月，到底多少是真，多少是假。</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>人生三大乐事</h2>
        <ul>
          <li>父母俱在，兄弟无故</li>
          <li>仰不愧于天，俯不怍于人</li>
          <li>得天下英才而教育之</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS部分

首先对卡片的容器进行调整,加上一些卡片阴影，卡片圆角之类的基本样式，并通过TranslateZ把卡片的一部分内容放到卡片的反面- ，使用backface-visibility: hidden;可以使卡片反面朝向用户时不可见，可以看到，已经初具一张卡片的样子了~

image.png

body {
  background-color: #dadce2;
  background-image: linear-gradient(140deg, white, #dadce2);
  margin: 0;
  width: 100vw;
  min-height: 450px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardContainer {
  position: relative;
  width: 500px;
  height: 275px;
  margin: 4px;
  perspective: 1000px;
}

.card {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  box-shadow: 0 14px 50px -4px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4);
}
.card .side {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background-color: white;
}

接着为卡片添加悬浮的样式及背景图片与一些文字的样式。当鼠标悬浮时，去除卡片的模糊，并放大卡片，为这个过程添加一定的transition过渡时间，可以使动画更加平滑，能产生聚焦的效果。

image.png

image.png

.card:hover {
  transform: translateZ(0px);
}
.card:hover:after {
  opacity: 1;
}

.card .front {
  z-index: 2;
  background-image: url(https://img1.baidu.com/it/u=2822445534,1253262868&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576);
  background-position: center;
}
.card .back {
  transform: rotateY(180deg);
  background-image: url(https://img2.baidu.com/it/u=2368433042,2821070939&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500);
}
.card .info {
  display: inline-block;
  padding-left: 25px;
}

.front .avatar {
  display: inline-block;
  background-color: #dadce2;
  background-position: center;
  background-size: cover;
  margin: 5% 0 0 5%;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.front .avatar {
  background-image: url(https://avatars.githubusercontent.com/u/94500053?v=4);
}

.back {
  position: relative;
}
.back h2 {
  margin-top: 16px;
  margin-bottom: 18px;
}
.back li {
  line-height: 22px;
  margin: 2px 0 6px 0;
}

JS部分

JS部分比较简单，首先获取到卡片的节点，然后为其添加click的事件监听器，当触发对 card 的点击事件时，对 card 添加或移除 active 的类，结合preserve-3d与 transform 即可实现卡片的翻转效果~

image.png


const card = document.querySelector('.card');

function transition() {
  if (this.classList.contains('active')) {
    this.classList.remove('active')
  } else {
    this.classList.add('active');
  }
}

card.addEventListener('click', transition);
 

.active {
  transform: translateZ(0px) rotateY(180deg) !important;
}
.active:after {
  display: none;
}

完整代码

完整代码已经上传到了码上掘金，供大家参考~

avatar
文章
阅读
粉丝