当青训营遇上码上掘金

起

其实很早之前就已经看到这个活动了，大约是1月初吧，当时以为活动已经结束了，后面通知时才发现活动时间还蛮长的，于是就有了这个名片。

承

如何实现名片效果？在这里我使用了HTML,CSS来绘制了一个网页，用来显示我的一些信息，并且使用了一个缩放效果来使名片更美观。关于下方按键部分的关联并没有做完整，这个问题会在下次的更新中改进。

转

关于代码部分如下

html部分，制作了一个网页

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
  <title>Animated Profile Card Test</title>
</head>
<body>
</body>
</html>

然后插入了image content和detail则是个人介绍部分

div class="card">
    <div class="imgBx">
      <img src="https://raw.githubusercontent.com/KenYonooB/resource-storehouse/main/4_X4%EF%BC%881%EF%BC%89.jpeg">
    </div>
    <div class="content">
      <div class="details">
        <h2>Ken Yon<br><span>On your six</span></h2>
        <div class="data">
          <h3>Locate<br><span>TanJin</span></h3>
          <h3>E-mail<br><span>KenYon@outlook.com</span></h3>
          <h3>Number<br><span>+86 1748282657</span></h3>

使用CSS修改了页面底色和字体颜色，同时修改了字体位置和卡片大小，同时对图片进行了简单调整

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(45deg, #c90a4a, #006db6);
}
.imgBx {
  position: absolute;
  left: 50%;
  top: -50px;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: 0.5s;
}
.card:hover .imgBx {
  width: 250px;
  height: 250px;
}

.imgBx img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

结

总的来说理解了许多效果，对于所学知识有了上手实践的机会。对于未实现的功能，希望能在下一个版本中实现并更新效果如下参考文章：github.com/Mr-majifu/A…

青训营 X 码上掘金--我的名片

起

承

转

结