我的名片

Run_
84 阅读2分钟

当青训营遇上码上掘金，在线创作个人名片，明日之星就是我

前言

作为前端开发人员，自己的名片就是自己的脸面，那一定得炫酷，可以不够优美，但是一定得duangduangduang的加特效

本人实力有限，暂且只能做出这样的名片

名片设计亮点

  1. 鼠标悬浮在头像上时，头像旋转
  2. 按钮采用延展特效，填入emoji文字
  3. 点击切换状态栏
  4. 使用em做多端适配

实现原理

  1. 使用border-radius属性将头像切成圆形

    border-radius的值等于图片宽高时，图片为圆形

  2. 头像旋转选用CSStransform属性的rotate函数

    .avatar img:hover {
  transform: rotate(360deg);
}

  3. 点击切换状态栏

    灵活使用svg，保证icon清晰度

    const btn = document.querySelector('button')
const desc = document.querySelector('.description')
let flag = true
btn.onclick = () => {
  if (flag) {
    desc.innerHTML = '<a class="link" href=""><?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1674129977869" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3190" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35"><path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" p-id="3191" fill="#ffffff"></path></svg></a><a class="link" href="http://wpa.qq.com/msgrd?v=3&uin=1723672621&site=qq&menu=yes"><?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1674129754722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2176" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35"><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z" p-id="2177" fill="#ffffff"></path></svg></a>'
    btn.innerHTML = 'back 👈︎'
    flag = !flag
  } else {
    desc.innerHTML = '大三在读生，前端开发人员，求收留'
    btn.innerHTML = '👉 more'
    flag = !flag
  }
}

开发总结

在做这个名片的过程中，我的原意是想以html+css实现，抛弃js。但随着开发的进行，我发现有的效果用css好像并不足够，迫于无奈加上了js。在写状态切换的过程中也遇到了一些问题，一开始我想在点击事件中直接进行事件添加，但是根本不行，不是获取不到Dom就是变量未定义，后来采取另一种方案，使用flag标识。用它对状态进行判断，从而继续点击事件切换状态，开发之前的很多想法等到实际开发的时候发现不太现实，不是预设的方案做不出来，就是根本没有思路。不过还好，在码上掘金平台进行开发，可以实时看到自己开发的产品，从而第一时间更改代码，非常好用。

码上掘金

avatar
文章
阅读
粉丝