「青训营 X 码上掘金」主题创作活动-极简名片

Norn
282 阅读4分钟

当青训营遇上码上掘金

名片效果展示

image.png

简介

本文为 「青训营 X 码上掘金」主题创作活动入营版 主题1的名片创作代码的介绍。

名片作为向他人介绍自我的重要工具，需要简洁且重点鲜明，于是我通过HTML、CSS和JS制作了一张极简的名片。

名片中的重点信息用粗体文字放置在显眼的位置，且公司名称使用链接形式表示，便于点击浏览公司详情。

而联系方式等信息则通过图标展示，当鼠标悬停在图标上时，对应的信息就会在图标下方出现。

具体实现

HTML:

  • 整体结构：

首先创建一个div，设置其class为card。然后在里面创建一个正面的div和一个背面的div。

  • 名片正面：

包含姓名、职位、就职公司链接、二维码图标和一些联系方式等信息的图标。

  • 名片背面：

包含公司名称和LOGO。

  • 代码：

<div class="card" >
    <div class="front">
      <p>
        <strong class="name">
          姓名
        </strong> 
        /前端工程师
      </p>
      <a href="https://www.bytedance.com/" target="_blank" class="comapny">
        北京字节跳动科技有限公司
      </a>
      <div class="detail">
        <div class="unimportant_info" data="https://github.com">
          <i class="iconfont" alt="地址">&#xe600;</i>
          
        </div>
        <div class="unimportant_info" data="123@123.com">
          <i class="iconfont" alt="邮箱">&#xe653;</i>
          
        </div>
        <div class="unimportant_info"  data="12345678910">
          <i class="iconfont" alt="电话">&#xe642;</i>
          
        </div>
      </div>
      
      <i class="iconfont QRcode" alt="二维码">&#xe609;</i>
    
    </div>
    <div class="back">
      <h1 class="company_name">字节跳动</h1>
      <i class="iconfont logo" alt="logo">&#xe682;</i>
    </div>
  </div>

CSS：

  • 深色和亮色模式适应：

设置了深色模式的根元素的样式，并在@media (prefers-color-scheme: light)中设置了亮色模式的根元素样式。

  • 背景样式

设置了class为card的div的基础样式，使其中的元素和文字能够更好地展现。

设置了class为front，back的div背景图片、外投影和具有弧度的边角，使名片效果更为美观。

  • 文字：

设置了a标签和body标签的基础样式，使得链接更好融入页面，body的样式也更为合适。

姓名和公司名称是重要信息，需要突出显示，所以为name和company类单独设置字体大小和权重。

背面的公司名称需要突出展示且美观，因此用h1标签表示，并且设置company_name类中 text-align: center;且下方外边距为0，使得公司名称居中展示，与logo距离适中。

  • 图标:

通过@font-face引入了iconfont，用于在名片上添加图标，设置了iconfont类的基础样式，应用在所有图标上。

设置class为detail的div，display: flex;且justify-content: space-around;使得表示联系方式等信息的图标横向排列。

再设置class为unimportant_info的图标样式，当鼠标位于图标上方时，图标上移10px，且用::after使得在图标上移的同时，下方出现信息文本，信息通过attr获得标签内的data属性值。

  • 实现名片翻转：

为class为front和back的div设置了position: absolute;使得两个div重叠，还设置了backface-visibility: hidden;使翻转后的div隐藏，以及transition: all 1s;和transform-style: preserve-3d;的设置，决定翻转效果。

然后设置class为back的div绕y轴翻转180度，从而将其隐藏。

  • 代码:
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
}
@font-face {
  font-family: 'iconfont';  /* Project id 3879578 */
  src: url('//at.alicdn.com/t/c/font_3879578_3thhbwb3164.woff2?t=1675438970352') format('woff2'),
       url('//at.alicdn.com/t/c/font_3879578_3thhbwb3164.woff?t=1675438970352') format('woff'),
       url('//at.alicdn.com/t/c/font_3879578_3thhbwb3164.ttf?t=1675438970352') format('truetype');
}
.iconfont {
  font-family:"iconfont" !important;
  font-size: 30px;
  font-style: normal;
  color: #c6d1f9;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #c6d1f9;
  text-decoration: inherit;
}
a:hover {
  color: #d8e0ff;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

.card {
  position: relative;
  height: 60mm;
  width: 100mm;
  left: 25%;
  top: 20%;
  text-align: left;
}


.front,.back {
  height: 50mm;
  width: 90mm;
  padding: 1em;
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F16%2F20200516211922_uvqtq.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678031302&t=cdf2a9dfa38391ae0c9d00e931d70575");
  background-position: center;
  background-size: 150mm 150mm;
  border-radius: 6px;
  border-bottom: 4px solid transparent;
  border-right: 3px solid transparent;
  filter: drop-shadow(5px 5px 5px #271858);
  position: absolute;
  backface-visibility: hidden;
  transition: all 1s;
  transform-style: preserve-3d;
}
.back {
  transform: rotateY(180deg);
}

.name {
  font-size: 30px;
}
.comapny {
  font-size: 20px;
  font-weight: bold;
}

.detail {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}
.unimportant_info {
  margin: 0px;
  font-size: 15px;
  transition: transform 0.5s ease-out;
  position: relative;
}
.unimportant_info:hover {
  transform: translateY(-10px);
}
.unimportant_info:hover::after {
  content: attr(data);
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 0.1rem solid #8a97c7;
  border-radius: 5px;
  position: absolute;
  top: 3rem;
  left: -3rem;
}
.QRcode {
  position: relative;
  left: 75%;
  bottom: 91%;
  font-size: 90px;
  color: #e2e2e2;
}

.company_name {
  text-align: center;
  margin-bottom: 0em;
}
.logo{
  margin-left: 1.2em;
  font-size: 100px;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #f3f3ff;
    background-color: #ffffff;
  }
}

JS：

  • 实现名片翻转：

获取class为front和back的元素(即名片正面和背面)，分别为他们添加监听事件。

当点击正面时，正面翻转180度，背面翻转回0度。

当点击背面时，背面翻转-180度，正面翻转回0度。

  • 代码：
  const front = document.querySelector(".front");
  const back = document.querySelector(".back");
  
  // 卡片正面翻转
  front.addEventListener("click", () => {
   front.style.transform="rotateY(180deg)"
   back.style.transform="rotateY(0deg)"
  })
  
  // 卡片反面翻转
  back.addEventListener("click", () => {
   back.style.transform="rotateY(-180deg)"
   front.style.transform="rotateY(0deg)"
  })

全部代码及效果展示

avatar
文章
阅读
粉丝