当青训营遇上码上

介绍

手刺（Business card），是一种载有关于公司或个人的联络信息的卡片，常用于商务来往场合之中，作为一种便利和记忆辅助工具的共享。手刺通常包含：名字、单位或商业机构名称（通常带有商标）、以及联络信息（如：街道地址、电话号码、传真号码、电子邮件地址及网站）。

手刺是向人介绍自我的重要工具，作为一名程序员用代码做毛遂自荐是一件非常酷炫的工作。用代码制造一张手刺最直观地介绍给别人的方法便是通过运用 HTML 制造一个网页来显现了，下面咱们就来制造一个翻滚动效的个人手刺。

完成

  1. 创立一个外部容器用来封装手刺内部各个元素，一个内部容器用来完成翻滚动效。
<div class="flip-card">
  <div class="flip-card-inner"></div>
</div>

翻滚动效需求运用 CSS transform、transform-style 特点和 rotateY 函数，rotateY 函数定义了一个 2D 转换，它能够让一个元素围绕纵坐标 (垂直轴) 旋转，transform-style 设置元素的子元素是坐落 3D 空间中还是平面中。

.flip-card {
  width: 480px;
  height: 320px;
  margin-bottom: 1em;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.rotate {
  transform: rotateY(180deg);
}
  1. 创立手刺正面的元素。
<div class="flip-card-front">
  <figure class="snip">
    <figcaption>
      <h2>斯图尔特 <span>怀特</span>
      </h2>
      <p>我想假如咱们不能讪笑那些没有意义的工作，咱们就无法对很多日子做出反响。</p>
      <div class="icons">
        <a href="#">
          <i class="ion-ios-home"></i>
        </a>
        <a href="#">
          <i class="ion-ios-email"></i>
        </a>
        <a href="#">
          <i class="ion-ios-telephone"></i>
        </a>
      </div>
    </figcaption>
    <img src="https://i.328888.xyz/2023/01/15/2wXwF.jpeg">
    <div class="position">网站设计者</div>
  </figure>
</div>

因为要运用网络字体和图标，所以要通过链接引入（也能够运用 link 元素）。

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
body {
  font-family: 'Raleway', Arial, sans-serif;
  background-color: #212121;
}
  1. 创立手刺反面的元素。
<div class="flip-card-back" style="--img: url(https://i.328888.xyz/2023/01/15/2wXwF.jpeg)">
  <h2>电话：123</h2>
  <h2>邮箱：123@qq.com</h2>
  <h2>地址：浙江省·杭州市</h2>
  <h2>网址：https://zkrisj.gitee.io</h2>
</div>

反面是个人信息的详细资料，布景设置为正面图片+径向突变，因为字体颜色容易被布景色光线干扰，所以加了一个 background-blend-mode CSS 特点，它用来定义该元素的布景图片与布景色怎么混合。

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  z-index: 1;
}
.flip-card-front {
  background-color: #bbb;
}
.flip-card-back {
  background: var(--img) 0 / 100% 100%, radial-gradient(#e4d8fb, #3F51B5);
  background-blend-mode: darken;
  color: white;
  transform: rotateY(180deg);
  display: grid;
}
.flip-card-back h2 {
  margin-left: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
figure.snip {
  position: relative;
  overflow: hidden;
  margin: auto;
  width: 480px;
  height: 320px;
  background: #ffffff;
  color: #000000;
}
figure.snip * {
  box-sizing: border-box;
}
figure.snip>img {
  width: 50%;
  border-radius: 50%;
  border: 4px solid #ffffff;
  transition: all 0.35s ease-in-out;
  transform: scale(1.6);
  position: relative;
  float: right;
  right: -15%;
}
figure.snip figcaption {
  padding: 20px 30px 20px 20px;
  position: absolute;
  left: 0;
  width: 50%;
}
figure.snip figcaption h2,
figure.snip figcaption p {
  margin: 0;
  text-align: left;
  padding: 10px 0;
  width: 100%;
}
figure.snip figcaption h2 {
  font-size: 1.3em;
  font-weight: 300;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip figcaption h2 span {
  font-weight: 800;
}
figure.snip figcaption p {
  font-size: 0.9em;
  opacity: 0.8;
}
figure.snip figcaption .icons {
  width: 100%;
  text-align: left;
}
figure.snip figcaption .icons i {
  font-size: 28px;
  padding: 5px;
  top: 50%;
  color: #000000;
}
figure.snip figcaption a {
  opacity: 0.3;
  transition: opacity 0.35s;
}
figure.snip figcaption a:hover {
  opacity: 0.8;
}
figure.snip .position {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: left;
  padding: 15px 30px;
  font-size: 0.9em;
  opacity: 1;
  font-style: italic;
  color: #ffffff;
  background: #000000;
  clear: both;
}
  1. 绑定点击事情，当点击正面图片时，手刺将翻转到反面，而点击反面布景时切换回正面。
for (const f of document.querySelectorAll('.flip-card-inner')) {
  f.querySelectorAll('img, .flip-card-back').forEach(v => v.onclick = e => {
    f.classList.toggle('rotate');
  });
}

完整代码+码上