「青训营 X 码上掘金」主题创作，我的一点感受

当青训营遇上码上掘金，我很高兴能参加此次的青训营，在青训营里面也遇到了很多志同道合的小伙伴。每次遇到新的小伙伴时，都要进行自我介绍，以增加彼此间的了解；作为一名程序员如何用代码做一个简单有效的自我介绍是一件非常酷炫的事情。因此，我选择了“我的名片”这个主题进行创作。

因为此次青训营活动是在稀土掘金的平台上进行的，所以我在名片的背面放了一张稀土掘金的宣传图。这样更能体现出我们是在稀土掘金这个社区中有机会得以认识，然后互相帮助，解决问题，一起成长的。这个名片主要是采用的html和css编写的一个简单的内容展示和动画效果。

其效果图如下：

html代码

<div id="app">
    <div class="card">
      <div class="front">
        <div class="up">
          <div class="avatar">
            <img src="https://p3-passport.byteimg.com/img/user-avatar/50768843d43d4a70b40dd337fbba416c~100x100.awebp"
              alt="avatar">
          </div>
        </div>
        <div class="down">
          <div class="username">姓名： <strong>ruhangs</strong></div>
          <div class="info">
            <strong>简介：</strong> <em>热情随和，具有进取精神和团队精神，有较强的动手能力。良好协调沟通能力，适应力强，反应快、积极、灵活，爱创新！</em>
          </div>
        </div>
      </div>
      <div class="back">
        <img src="https://www.skyname.cn/app/upload/tupian/2022/02/02212098.png" alt=""
          width="300px" height="500px">
      </div>
    </div>
  </div>

CSS代码

* {
  padding: 0;
  margin: 0;
}
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
}

.card {
  position: relative;
  width: 300px;
  height: 500px;
  perspective: 800px;
  transform-style: preserve-3d;
  transition: 2s linear;
}

.card:hover {
  transform: rotateY(180deg);
}

.front {
  position: absolute;
  height: 100%;
  background-color: rgb(21, 142, 241);
  border-radius: 0.5em;
}

.front .left,
.right {
  flex-direction: column;
  height: 100%;
}

.front .up {
  margin-top: 30px;
  text-align: center;
}

.front .up .avatar img {
  transition: all 1s;
  border-radius: 50%;
  border: 2px solid white;
}

.front .down .username {
  margin-top: 0.5em;
}

.front .down .info {
  margin-top: 2em;
}

.front .down .info strong {
  text-align: center;
}

.username,
.info {
  text-align: center;
  color: white;
}

.username {
  color: #e7dcb9;
  font-size: 26px;
  font-weight: bolder;
}

.back {
  position: absolute;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
.back img {
  border-radius: 0.5em;
}

通过名片我相信可以更加快速，更加方便地让小伙伴们了解到我，一起愉快地渡过此次的青训营学习之旅！！！