伸缩名片|青训营主题创作

当青训营遇上码上掘金

主题

本篇文章分享主要是依照此次 青训营 x 码上掘金 主题创作活动 中的第一个选题"我的名片"进行创作。该选题的内容简述为：名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

设计

在审题后设计思考中，我想用上在本次青训营中学到的一些CSS特性来优化我的名片。这个名片将会有两部分组成，一个是预览个人信息的区域，一个是展示个人介绍详情的区域。然后将详情区域垫在预览区域下方，当我们鼠标悬浮在预览区域时，详情区域就会弹出以展示信息。

效果预览

编码(仅展示关键代码)

• HTML部分

<div class="card_box">
    <img  class="portrait" src="./img/pro.jpg">
    <p class="Uname">Sjkuu Vivid</p>
    <p class="tel">#197-235-327</p>
    <div class="intro">
        <p class="intro_text">这是一段自我介绍...</p>
    </div>
</div>

• CSS部分

:root{
  --bg-color-dark:rgba(0, 0, 0, 0.9);
  --main-color-dark:rgb(203,133,63);
  --bg-color-light:rgb(255,255,255);
  --main-color-light:rgb(63, 159, 203);
}
*{
  margin: 0;
  padding: 0;
}
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(190, 190, 190,0.5);
}
.card_box{
  position:relative;
  width: 250px;
  height: 170px;
  box-sizing: border-box;
  padding: 10px;
  background-color: var(--bg-color-light);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: .5s;
}
.card_box:hover{
  box-shadow: 0px 5px 10px rgb(196, 196, 196);
  transition: .5s;
}
.portrait{
  height: 80px;
  width:80px;
  border-radius: 100%;
  padding: 5px;
  border: 2px var(--main-color-light) solid;
}
.Uname{
  color:  var(--main-color-light);
  font-weight: 600;
}
.tel{
  padding-top: 10px;
  color:  var(--main-color-light);
  font-weight: 400;
  font-size: small;
}
.intro{
  width: 300px;
  height: 200px;
  background-color: rgba(128, 128, 128,0.5);
  border-radius: 6px;
  position: absolute;
  left: -25px;
  top: 20px;
  transition: .5s;
  z-index: -1;
}
.card_box:hover  .intro{
  left: -25px;
  top: 100px;
  transition: .5s;
}
.intro_text{
  position: absolute;
  top: 100px;
  left: 30px;
}

后记

这次青训营主题创作给我最大的感受就是一次实际的技术分享过程，从学习前端以来一直都是在跟着别人学习，从来都没有分享过自己的一些思考与设计。同时也是一次记录的过程，通过此次主题创作，我开始体会到技术分享的快乐，希望有朝一日我也能让别人用上我所设计创作的产物。