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

当青训营遇上码上掘金，奇思妙想就会在代码中绽放光彩。

引言

印象里的名片大多是简约风格的，一时还没有想到怎样能做出炫酷的效果。一开始的设想是用JavaScript做一些动态的效果，例如博客里常用的一些动态背景。在构思的时候偶然在B站看到了一个视频：【CSS】画一个路飞_哔哩哔哩_bilibili，感叹之余想到可以不使用JavaScript和图片等资源，用纯CSS画一个自己的头像作为标识，结合身份信息，作为自己的个人名片。

详细设计

页面分为两部分，左半部分是自己的头像，右半部分是名片内容

1、头像

• 首先观察一下原图

• 以观测者位置定位左右，再考虑元素的布局，头像大致可以分为几个部分：左耳前、左耳后、右耳、脸的上下半部分、左右眼、鼻子、嘴。其中面部五官部分还有较多的细节要调整
• 得到一个大体线框图

• 首先用几个div盒子配合基本的CSS属性画出上述结构，然后再针对颜色、形状等细节具体调整CSS代码，这就是一个比较考验耐心的事情了。
• 其中，有一些特殊的形状、弧度等需要用到一些特殊的CSS属性，例如clip-path，配合polygon()和circle()裁剪出比较自由的形状，从而得到想要的形状或弧度。skew()可以使元素倾斜一定的角度。linear-gradient()可以得到渐变色。
  • 牙齿部分的CSS代码

  .teeth {
      position: absolute;
      background-color: #fff;
      width: 40px;
      height: 60px;
      top: 30px;
      left: 112px;
      z-index: 5;
      border-bottom-left-radius: 50px 30px;
      clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 20% 0);
  }
  

• 最后得到的效果如下

2、名片

• 名片部分相对来说较简单一些，由于本人不懂UI设计且审美过于直男，所以左边用一些绝对定位的div盒子作为简单的色块填充，结合z-index形成层叠状。
• 右边除了个人信息外，还绘制了一个简单的掘金图标，思路是图标由5个子元素组成，按照序号的奇偶性填充白色或蓝色，然后使用transform的rotate()设置X轴和Z轴倾斜45度，子元素的宽高自底向上依次递减，使用绝对定位固定好位置。
  • 图标部分代码

  .part:nth-child(even) {
    background-color: #fff;
  }
  .part:nth-child(odd) {
    background-color: #1e80ff;
  }
  @for $i from 0 through 4 {
    .part-#{$i + 1} {
      position: absolute;
      width: #{$pwidth * (1 - $i * 0.2)}px;
      height: #{$pheight * (1 - $i * 0.2)}px;
      transform: rotateX(#{$angleX}deg) rotateZ(#{$angleZ}deg);
      left: #{$pleft * $i}px;
      top: #{$ptop - $i}px;
    }
  }
  

• 最后得到的名片如下图所示

3、最终效果