当青训营遇上码上掘金

1. 选择主题

这次活动我选择的主题是主题1：我的名片名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

2. 基本介绍

这是我第一次参加字节的青训营，目的是为了结识更多的朋友以及学习更多的知识，借助“我的名片”这个主题，熟悉一下对前端三件套的使用，也算是提前为上课做准备吧。

3. 名片展示

4. 具体实现

4.1 HTML部分

简单的弄了几个盒子的嵌套。

4.2 CSS部分

首先是基本的初始化。
对于bigBox盒子，给了个浅灰色的颜色。
对于box父盒子，利用圆角边框border-radius：50%将其设置成圆形，给了一个浅米色，并给一个相对定位。
对于logo子盒子，用我的头像当background,同样设置成圆形，给一个绝对定位。
为box盒子以及logo盒子添加简单发光动画

@keyframes box {
  0% {
    box-shadow:0px 0px 16px #f00;
  }
  100% {
     box-shadow:0px 0px 32px #5ed3f3;
  }
}
@keyframes logo {
  0% {
     box-shadow:0px 0px 16px #5ed3f3;
  }
  100% {
    box-shadow:0px 0px 32px #f00;
  }
}

对于text子盒子，添加绕圈旋转的动画，并给一个绝对定位。

@keyframes animate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

对于JS中创造的span标签，进行简单处理，使用transform-origin属性令其绕着中心点旋转。

4.3 JS部分

const text = document.querySelector(".text");
const span = text.textContent.split("").map((item, i) => {
  return `
    <span style="transform:rotate(${i*16.5}deg)">
     ${item}
    </span>`
  ;
});
text.innerHTML = span.join("");

首先使用document.querySelector()方法获取到文字的标签，然后用split()方法对文本内容进行分割,返回一个字符串数组，紧接着对该数组使用map()方法,对数组的每一项都运行传入的函数，该函数让每一个分割出来的字符都独立进行旋转，返回一个span标签，最终返回一个数组，即span。最后使用join()方法，将数组中的元素转换为字符串，再放回text中去。

5. 总结

整体看下来感觉并不是很美观，所以起名为土味名片，作为初学者，希望大家多多指教。

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