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

当青训营遇上码上掘金

我正在参加「青训营 X 码上掘金」主题创作活动入营版:juejin.cn/post/718775…

主题选择

我选择的是主题一《名片制作》，在各种社交平台上标识我们每一个人的身份的就是我们的个人名片（bussiness card），一个有趣的名片能让人眼前一亮，心生好奇与憧憬，那就让我们来制作一个简洁大方的名片吧

创作过程

参考了codePen上的代码片段：codepen.io/lauraalpint… 名片是有正反面的，我们需要实现一个鼠标移动上去卡片翻转到反面的效果，首先我们先设计卡片的正面(front)

• 正面卡片

首先在正面卡片标签中放入一个内容cont的div标签，然后用span标签书写alert 和 hello wordl的内容

div class="card__side card__side--front">
     <div class="card__cont">
       <span class="blue">alert</span>
       <span>(<span class="green">'Hello World!'</span>)</span>
     </div>
   </div>

设定背景颜色

&--front {
      background-color: #1c1c1c;
    }

• 背面卡片

内容结构是一样的，加入了名称、邮件地址和职位与个人网站的字段。

<div class="card__side card__side--back">
      <!-- Back Content -->
      <div class="card__cta">
        <p><span class="purple">const</span> aboutMe <span class="cyan">=</span> {
          <br />
          <span class="space red">name</span>
          <span class="cyan">:</span> <span class="green">'julien'</span>,
          <br/>
          <span class="space red">email</span>
          <span class="cyan">:</span> <span class="green">'sehjli@mail.scut.edu.cn</span>',
          <br/>
          <span class="space red">position</span>
          <span class="cyan">:</span>
          <span class="green">'front-end developer'</span>,
          <br/>
          <span class="space red">website</span><span class="cyan">:</span> <span class="green">'https://github.com/julien0220'</span>
          <br/> 
          };
        </p>
      </div>

背面背景颜色一样保持黑色，添加transform属性

&--back {
      transform: rotateY(180deg);

      background-color: #1c1c1c;
    }

• 翻转效果

翻转效果的实现主要是添加css的样式，鼠标停留时判断当前状态并进行对应的旋转，只需分别写上side--front和side--back的属性

  &:hover &__side--front {
    transform: rotateY(-180deg);
  }

  &:hover &__side--back {
    transform: rotateY(0deg);
  }

• 文字颜色与布局

这部分的内容相对简单，在css中编写font-family与使用的几种颜色

* {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
    "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
    monospace;
}

$blue: #29b6f6;
$green: #9ccc65;
$purple: #ba68c8;
$orange: #f57c00;
$red: #ef5350;
$cyan: #4dd0e1;
$background-light: #ffa726;
$background-dark: #ff9800;

crad的样式

 height: 15rem;
    transition: all 0.8s ease;

    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 30rem;

    backface-visibility: hidden;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1.5rem 4rem rgba(black, 0.4);

成果展示

完整代码

<div class="content">
  <div class="card">
    <div class="card__side card__side--front">
      <!-- Front Content -->
      <div class="card__cont">
        <span class="blue">alert</span>
        <span>(<span class="green">'Hello World!'</span>)</span>
      </div>
    </div>
    <div class="card__side card__side--back">
      <!-- Back Content -->
      <div class="card__cta">
        <p><span class="purple">const</span> aboutMe <span class="cyan">=</span> {
          <br />
          <span class="space red">name</span>
          <span class="cyan">:</span> <span class="green">'julien'</span>,
          <br/>
          <span class="space red">email</span>
          <span class="cyan">:</span> <span class="green">'sehjli@mail.scut.edu.cn</span>',
          <br/>
          <span class="space red">position</span>
          <span class="cyan">:</span>
          <span class="green">'front-end developer'</span>,
          <br/>
          <span class="space red">website</span><span class="cyan">:</span> <span class="green">'https://github.com/julien0220'</span>
          <br/> 
          };
        </p>
      </div>
    </div>
  </div>

scss

* {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
    "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
    monospace;
}

$blue: #29b6f6;
$green: #9ccc65;
$purple: #ba68c8;
$orange: #f57c00;
$red: #ef5350;
$cyan: #4dd0e1;
$background-light: #ffa726;
$background-dark: #ff9800;

body {
  background-image: linear-gradient(
    to bottom right,
    $background-dark,
    $background-light
  );
}

@mixin text-color($color) {
  color: $color;
}

.blue {
  @include text-color($blue);
}

.green {
  @include text-color($green);
}

.purple {
  @include text-color($purple);
}

.cyan {
  @include text-color($cyan);
}

.red {
  @include text-color($red);
}

.content {
  height: 100vh;
  @include text-color(white);

  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  //FUNCTIONALITY
  perspective: 150rem;
  height: 20rem;
  width: 30rem;

  position: relative;

  &__side {
    height: 15rem;
    transition: all 0.8s ease;

    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 30rem;

    backface-visibility: hidden;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1.5rem 4rem rgba(black, 0.4);

    &--front {
      background-color: #1c1c1c;
    }

    &--back {
      transform: rotateY(180deg);

      background-color: #1c1c1c;
    }
  }

  &:hover &__side--front {
    transform: rotateY(-180deg);
  }

  &:hover &__side--back {
    transform: rotateY(0deg);
  }

  //FRONT SIDE STYLING
  &__cont {
    height: 15rem;
    background-color: #1c1c1c;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    @include text-color(white);

    p {
      margin-left: 1rem;

      & > .space {
        margin-left: 2rem;
      }
    }
  }
}

感悟

通过这次“码上掘金”的活动，锻炼到了自己的动手能力，在实际开发中学到了很多东西，也发现了自己的不足之处。实践出真知，一些东西只有你真正去做，去动手，才能真正掌握。最后呢，希望自己在这届青训营里能够充分锻炼自己，收获到更多的coding经验，学到更多知识，加油！