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

当青训营遇上码上掘金

本文将介绍如何使用 HTML/CSS/JS 三剑客来制作简单的个人名片，对应活动创作主题1：我的名片

同时为这个名片附上一些简单的CSS的动画效果

接下来，我们将使用 HTML 和 CSS 来为这个名片添加样式和布局。

首先，我们需要使用 HTML建立出大致的名片布局，划分出展示个人姓名，职位，简介，技能和个人相关链接的区域

相关的具体内容使用JavaScript动态的进行添加，这样就能把内容正确地显示在名片上。

HTML代码如下：

<div id="app">
  <div class="card">
    <div class="header">
      <h1>姓名</h1>
      <h3>职位</h3>
    </div>
    <div class="content">
      <h3>简介</h3>
      <p></p>
      <!-- <ul>
        技能
      </ul> -->
    </div>
    <div class="footer">
      <a href="#">LinkedIn</a>
      <a href="#">GitHub</a>
    </div>
  </div>
</div>

因为该名片的结构较为简单，因此为它添加一些额外的动画效果，以让其外观更加有吸引力。

通过结合 hover 和 @keyframe ，创作出一种当鼠标悬停在名片上时，内容逐渐浮动出现的效果，以此来带来更加细腻的交互体验，从而获得更好的展示效果。

此外，本来还构想着可以利用 hover 动画技术，在用户悬停在名片上时，调整内容的位置、缩放、旋转及颜色，使其呈现出更加炫酷的感觉，以此来提升用户的浏览乐趣。

但因为时间不足，最近的任务繁重，只能制作这样的简易效果

动画部分CSS代码如下：

.card:hover .header h1 {
  animation: moveInBottom 1s ease-out;
}

.card:hover .header h3 {
  animation: moveInBottom 1s 0.2s ease-out;
}

.card:hover .content p {
  animation: moveInBottom 1s 0.4s ease-out;
}

.card:hover ul li {
  animation: moveInLeft 1s ease-out;
}

.card:hover .footer a {
  animation: moveInRight 1s ease-out;
}

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

接着，我们可以使用JavaScript来读取名片信息，并将其填入预先定义好的 HTML 元素中。最后，我们可以把信息展示在名片上，让它更加的生动有趣。

JavaScript代码如下：

// 替换以下信息
const name = 'Lorde';
const position = '前端开发';
const intro = '普通路过程序员';
const skills = ['技能1', '技能2', '技能3'];
const linkedinUrl = '<https://www.linkedin.com/>';
const githubUrl = '<https://github.com/>';

// 更新 HTML 内容
document.querySelector('.header h1').textContent = name;
document.querySelector('.header h3').textContent = position;
document.querySelector('.content p').textContent = intro;

// 更新技能列表
const skillsList = document.createElement('ul');
for (const skill of skills) {
  const skillItem = document.createElement('li');
  skillItem.textContent = skill;
  skillsList.appendChild(skillItem);
}
document.querySelector('.content').appendChild(skillsList);

// 更新链接
document.querySelector('.footer a:nth-of-type(1)').href = linkedinUrl;
document.querySelector('.footer a:nth-of-type(2)').href = githubUrl;

总结

本文章概述了使用HTML、CSS和JavaScript创建简单而有效的个人名片的过程。

简答解释了个人如何使用HTML和CSS来创建卡片的结构，以及如何使用JavaScript来添加动态内容。为了使卡片更有趣，它还解释了如何使用悬停和@keyframe函数来创建鼠标悬停在卡片上时的动画效果。

因为是临时创作，未能进行深入创作，故而具体效果比较简陋，如果接下来能抽出时间，将会考虑修改和更新名片效果，加入更多有趣的特性