当青训营遇上码上掘金 | 科技风动态名片

前言

当青训营遇上码上掘金! 很幸运可以参加这次的字节跳动寒假训练营，作为一名初出茅庐的前端工程师，我选择了如下的主题进行我的码上掘金之旅

主题 1：我的名片

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

创作思路

首先我个人是应该非常喜欢科技风格的人，所以我希望我的名片可以非常的炫酷，具有科技色彩；与此同时，作为一名前端程序员，我觉得我们的名片美观应该完全取决于我们对于样式和动画的编写，而不是借助现有的精美的静态资源，所以我计划编写一个纯css的科技风名片；最后我希望我的名片可以具有动画效果，但是又不能太过复杂，可以给人一种动态的感觉又不会影响浏览器渲染，所以我选择使用css编写动效，使用 js 创作页面切换等功能

编写静态页面

首先我们确定我们创造的整个布局，我们希望构建一个具有两页的名片，第一页放置我们的个人信息，比如昵称，岗位，爱好特长等等，然后添加一个查看联系方式的按钮，如果其他人对我们感兴趣，就可以点击查看我们的联系方式，我们先构建我们的卡片，因为是科技风的创作，我们前往配色网站寻找一些合适的配色，我们编写一个卡片配置渐变的底色，然后编写边框，阴影等装饰，我们的一个卡片就初具规模了，效果如下：

之后我们编写两组卡片的内容，一组是第一页展示的内容，另一组是我们点击按钮切换的内容，这两组使用 flex 布局编写，整体居中，为了美观我们配置他们的字体大小，字体发光和整体的间距，我们设置两组卡片内容，一组的样式是 display：block ，其展示在第一屏，另一组的样式设置为 display：none 它暂时隐藏：

这部分的整体代码如下：

<div class="board" >
      <div class="first-asr">
        <fieldset class="show" id = "tab1">
          <legend>名片</legend>
          <div class="tips">姓名:摸鱼老萌新</div>
          <div class="tips">性别:男</div>
          <div class="tips">职位:前端工程师</div>
          <div class="tips">兴趣爱好:唱,跳,rap,篮球</div>
          <button onclick="btn1()">查看联系方式</button>
        </fieldset>
        <fieldset class="hidden" id = "tab2">
          <legend>联系方式</legend>
          <div class="tips">QQ:1016868503</div>
          <div class="tips">GIT:@zs0603</div>
          <div class="tips">邮箱:1016868503@qq.com</div>
          <button onclick="btn2()">返回</button>
        </fieldset>
      </div>
</div>

body {
  margin: 0;
}

fieldset {
  border: 1px solid #ccc;
  padding: 10px;
}

html {
  font-size: 10px;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
  background-color: #000;
}

.show {
  font-family: "Share Tech Mono", monospace;
  color: #daf6ff;
  height: 320px;
  font-size: 20px;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);

}

.hidden {
  display: none;
}

.tips {
  margin: 20px 0;
}


.first-asr legend {
  font-size: 36px;
}

.asr {
  font-family: "Share Tech Mono", monospace;
  color: #daf6ff;
  min-height: 300px;
  font-size: 20px;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}

.asr legend {
  font-size: 36px;
}

.board {
  padding: 15px;
  background: #111;
  background: linear-gradient(#004746, #111);
  border: 6px solid #00a4a2;
  box-shadow: 0 0 15px #00fffd;
  border-radius: 5px;
  left: 200px;
  position: absolute;
  top: 130px;
  z-index: 4;
  min-height: 300px;
  width: 600px;
  transition: 1s all;
}


button {
  box-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
  border: #0fe0f5 3px solid;
  padding: 8px 18px;
  text-align: center;
  text-transform: uppercase;
  color: #0fe0f5;
  font-size: 14px;
  font-weight: bold;
  background-color: transparent;
  outline: none;
  transition: 0.5s;
  cursor: pointer;
  margin: 15px;
}

编写动画

在编写了编写完了静态资源之后，我们希望我们的界面动起来富有交互感，我们从编写按钮的样式开始，我们使用 hover 伪类为我们的按钮添加样式，使得它可以在鼠标悬停的产生不一样的效果：

button:hover {
  color: #004746;
  background-color: #0fe0f5;
  transition: 0.5s;
}

之后我们希望我们的名片有一个炫酷的入场效果，它可以从无到有进行展开，逐步将内容展示到用户面前，所以我们添加一些 逐帧动画绑定到我们的卡片上，逐帧动画的逻辑就是，刚开始的时候 css 使得卡片没有长度和宽度，之后最后一帧我们让卡片的长度和宽度到达我们需要的长度，那么 css 就会补充整体的过程，使得我们的卡片有一个逐步展开的效果，要注意的是，如果我们不给卡片内部的内容设置一个的动画的话，卡片展开过程中，卡片中的内容会在卡片还很小的时候挤在卡片内部，非常的不和谐，所以我们给卡片的内容也设置一个动画，让它在卡片完全展开后才展示出来：

@keyframes input-entry {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes form-entry {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    padding: 0;
  }
  10% {
    width: 0;
    opacity: 0;
    height: 0;
    border: 1px solid #00a4a2;
    padding: 0;
  }
  100% {
    width: 600px;
    height: 344px;
    border: 6px solid #00a4a2;
    opacity: 1;
    padding: 15px;
  }
}

.first-asr {
  animation: input-entry 5s ease-in-out;
}

.board {
  padding: 15px;
  animation: form-entry 5s ease-in-out;
  background: #111;
  background: linear-gradient(#004746, #111);
  border: 6px solid #00a4a2;
  box-shadow: 0 0 15px #00fffd;
  border-radius: 5px;
  left: 200px;
  position: absolute;
  top: 130px;
  z-index: 4;
  min-height: 300px;
  width: 600px;
  transition: 1s all;
}

最后我希望在卡片的后方有一个一直旋转的圆环结构，这样可以增加页面的动态感和科技感，具体就是使用我们的伪类，我们编写一个圆环，使用伪类将他填充成半圆弧，然后我们给他编写一个旋转的动画，配置它一直执行，我们就可以看到效果了，具体的代码如下：

  <body id="app">
    <div class="board" >
      <div class="first-asr">
        <fieldset class="show" id = "tab1">
          <legend>名片</legend>
          <div class="tips">姓名:摸鱼老萌新</div>
          <div class="tips">性别:男</div>
          <div class="tips">职位:前端工程师</div>
          <div class="tips">兴趣爱好:唱,跳,rap,篮球</div>
          <button onclick="btn1()">查看联系方式</button>
        </fieldset>
        <fieldset class="hidden" id = "tab2">
          <legend>联系方式</legend>
          <div class="tips">QQ:1016868503</div>
          <div class="tips">GIT:@zs0603</div>
          <div class="tips">邮箱:1016868503@qq.com</div>
          <button onclick="btn2()">返回</button>
        </fieldset>
      </div>
    </div>
    <div id="circle1">
      <div id="inner-cirlce1">
        <h2></h2>
      </div>
    </div>
  </body>

#circle1 {
  animation: circle1 4s linear infinite, input-entry 6s linear;
  background: #000;
  border-radius: 50%;
  border: 10px solid #00a4a2;
  box-shadow: 0 0 0 2px black, 0 0 0 6px #00fffc;
  height: 560px;
  width: 560px;
  position: absolute;
  top: 40px;
  left: 220px;
  overflow: hidden;
  opacity: 0.4;
  z-index: 1;
}

#inner-cirlce1 {
  background: #000;
  border-radius: 50%;
  border: 36px solid #00fffc;
  height: 460px;
  width: 460px;
  margin: 10px;
}

#inner-cirlce1:before {
  content: " ";
  width: 240px;
  height: 480px;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}

#inner-cirlce1:after {
  content: " ";
  width: 480px;
  height: 240px;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes circle1 {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

编写完毕之后我们拥有了一个具有动效的界面，效果如下：

添加切换事件

最后我们给我们的两个页面添加上切换事件，我们的逻辑是，当我们点击 “查看联系方式” 按钮时，我们将当前这组数据的样式设置成隐藏的，然后将联系方式页面的这组内容的样式设置为展示的，我们通过两个类 show 和 hidden 来切换他们，当我们点击返回按钮时，逻辑互换：

    function btn1(){
      document.getElementById("tab1").className  = 'hidden';
      document.getElementById("tab2").className  = 'show';
     
    }

    function btn2(){
      document.getElementById("tab1").className  = 'show';
      document.getElementById("tab2").className  = 'hidden';
     
    }

整体效果

至此我们的名片编写完毕了，它的效果如下：

整个项目完整代码如下： code.juejin.cn/pen/7193589…