当青训营遇上码上掘金

前言

这是我第一次参加字节的青训营，所以很多页面上的功能都不太熟悉，所以文章可能简陋一点，大家凑合看一下，本次的主题创作我选择的是做一个我的名片，那么作为一个前端小白程序员，我来跟大家分享一下我在构思这个项目时的一些想法以及思路。

需求分析

做一个项目最先开始的一定是先进行需求分析，在进行需求分析后再画出原型设计图，得到原型设计图后我们的前端才会依据原型设计图来进行开发，那么在这里呢其实我是偷了点懒得，毕竟需求是自己提的，原型设计图嘛，其实名片翻来覆去就那样吧，只不过可能图案有所不同而已。于是我就使用了万能的百度，百度了一张名片图案，那我们就按照这个原型图来制作我们的前端页面吧。

开发准备

那作为前端，我们收到原型图以后首先要进行观察和思考，观察才能得知全部页面信息，思考才能构思前端页面该如何设计。

观察

首先显而易见的一张名片分为正反两面，其次在纯黑的卡面上有着金色的边框（ps：还是断掉的），正面是大名称（例如：公司名称等），背面则是分为两部分左侧是本人名字以及本人职务等个人信息，右侧则是一些联系方式等信息。

思考

我们要做一张名片，既然是名片，他首先给人的感觉是一种立体的卡片，所以我们首先要做的立体化3D一点，其次他有正反两面，所以我们可能需要做成可翻转的一张卡片，需要一些js动画，再观察后我们还发现了断掉的边框，边框很好做，断掉的要用什么方法解决，我想到了图层，在边框上盖一层图层。

开发过程

在一个页面上显示一个名片，从用户的角度考虑，肯定是居中会好看一点的，所以第一步我先给页面设置了四个属性

.html,body{
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

• width: 100vw;设置宽度等于页面宽度
• height: 100vh;设置高度等于页面高度
• padding: 0;内边距为0
• margin: 0;外边距为0

我们都知道正常页面它是会留出一个边框来进行美化的，但是我们有的时候不需要这个边框，就可以通过上面的代码进行去除。而设置宽度和长度则是为了后续子元素方便自适应适配，vw，vh是根据页面视窗大小来决定的。1vw 代表视窗的宽度为 1%，vh同理。设置好页面后，我们想让名片居中最好是在给它定义一个父元素，再将它的父元素设置为弹性盒子方便我们实现水平垂直居中。

.main{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

• display: flex;弹性盒子
• justify-content: center;水平居中
• align-items: center;竖直居中

想让名片产生立体3D效果其实只需要添加边框阴影效果即可

.card{
  position: relative;
  width: 60vw;
  height: 60vh;
  background-color: rgb(0, 0, 0);
  -moz-box-shadow:2px 2px 5px #000000; 
  -webkit-box-shadow:2px 2px 5px #333333; 
  box-shadow: 7px 15px 30px #000000;
}

而想让名片翻转起来则是需要一些css与js的配合，首先我们需要写两个盒子，一个盒子放我们正面的内容，另一个盒子放我们背面的内容，其次我们需要让两个盒子通过定位属性进行绝对定位，让他们重叠在一起，然后再让我们的背面盒子翻转过去这样就形成了一个贴在一起的两个盒子，隐藏在下半部分的盒子，我们就得到了一个卡片。

.card{
  position: absolute;
  width: 60vw;
  height: 60vh;
  background-color: rgb(0, 0, 0);
  -moz-box-shadow:2px 2px 5px #000000; 
  -webkit-box-shadow:2px 2px 5px #333333; 
  box-shadow: 7px 15px 30px #000000;
  backface-visibility: hidden;
  transition: all 1s;
}
.back{
  transform: rotateY(-180deg);
}

随后我们在js中使用querySelector() 方法返回文档中匹配指定 CSS 选择器的两个盒子样式，添加点击按钮和点击事件当我们点到卡片时更改两个盒子的样式类，使其翻转。

const front = document.querySelector(".front");
const back = document.querySelector(".back");
const frontButton = front.querySelector(".text");
const backButton = back.querySelector(".text");
frontButton.addEventListener("click", () => {
  front.style.transform="rotateY(180deg)"
  back.style.transform="rotateY(0deg)"
})
backButton.addEventListener("click", () => {
  back.style.transform="rotateY(-180deg)"
  front.style.transform="rotateY(0deg)"
})

解决掉卡片翻转问题后，我们需要解决图层问题，图层只可以使用绝对定位来改变，所以我们的图层元素中必须有position: absolute;定位，使用z-index来设置图层位置。

.line{
  position: absolute;
  width: 57vw;
  height: 54vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1vh solid yellow;
  z-index: 4;
}
.logo{
  position: absolute;
  background: rgb(0, 0, 0);
  width: 28%;
  height: 45%;
  margin-right: auto;
  margin-bottom: auto;
  border-radius: 0 0 100% 0;
  z-index: 5;
}
.text{
  position: absolute;
  width: 56vw;
  height: 53vh;
   left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
	justify-content: center;
  align-items: center;
  overflow: hidden;
	cursor: pointer;
}

解决了以上这些问题后，剩下的就是卡片内容排版了，这些比较简单我就不在过多描述，大家有兴趣的可以点进我的链接观看 (晨曦的名片 - 码上掘金 (juejin.cn))