当青训营遇上码上掘金｜我的名片

王大帅哥学前端
138 阅读4分钟

当青训营遇上码上掘金

主题 1：我的名片

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

💡效果如下图所示：

截屏2023-02-12 10.49.42.png

设计思路

名片作为介绍自己的重要载体，首先应该是美观和吸引眼球～因此设计的时候用了比较亮眼的颜色搭配，原谅我这个理工直男审美🤣，我个人觉得红蓝搭配还挺好看的～

其次是加入了开场的动画效果，更加有吸引眼球的效果～

代码完全由HTML和CSS完成，由于我调试过程中自己写的动画实在太辣眼睛，引入了Animate.css动画库作为动画效果～

代码逻辑

  • 首先看一下HTML骨架：
<div id="container">
  <div class="cardmask">
    <div class="card">
      <div class="photo"></div>
      <p class="name"><span></span>Robin</p>
      <hr />
      <div class="description-detail">
        <p class="box age"><span>年龄</span><span class="details">24岁</span></p>
        <p class="box tool"><span>技术栈</span><span class="details">Vue Ts React</span></p>
        <p class="box time"><span>练习时长</span><span class="details">两年半</span></p>
      </div>
      <hr />
      <div class="connection">
        <div class="QQ"></div>
        <div class="Wechat"></div>
        <div class="weibo"></div>
        <div class="phone"></div>
      </div>
    </div>
  </div>
</div>

最外层由id为container的容器包裹，在里面是一个cardmask作为动画开始的遮罩和外边框的定位盒子，便于后期制作动画效果。

再里面是一层是整个名片的类为card的容器盒子，其中含有6个同级的子元素，分别代表了头像（class="photo"），姓名（class="name"），分割线（<br />*2），个人信息（class="description-detail"）和联系方式（class="connection"）五部分。

个人信息部分又包含年龄、技术展、练习时长三个描述项；联系方式包含QQ、微信、微博、手机联系图标。

整体设计简洁明了，只对重要信息做一个展示～便于观众快速GET重点。

  • CSS部分

CSS部分负责了页面整体的布局、样式和动画展示。

首先是没得说的把初始外边距和内边距调整为零。

:root{
  --backcolor: linear-gradient(145deg, skyblue 10%, pink 80%);
  --border-color: #4c3ce2;
  --font-color: #000000;
  --font-backcolor: #4133be;
}
*{
  margin: 0;
  padding: 0;
}

背景：设置为红蓝渐变色，利用了linear-gradient属性。

body {
  background: var(--backcolor);
  height: 100%;
}

名片遮罩层：通过绝对定位和伪元素，设置好名片的外边框。将初始遮罩层大小置为零，通过动画（startfirst）对遮罩层进行展开，同时加上外边框动画（startsecond），调整合适的时间和延迟，营造一种动态描边的效果。

.cardmask{
  width: 0;
  height: 0;
  position: relative;
  animation: startfirst .5s ease forwards;
}
.cardmask::before,.cardmask::after{
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  animation: startsecond 2s ease forwards;
  border-radius: 5px;
} 
.cardmask::before{
  top: -2px;
  right: -2px;
  border-top: 5px solid var(--border-color);
  border-right: 5px solid var(--border-color);
}
.cardmask::after{
  left: -2px;
  bottom: -2px;
  border-bottom: 5px solid var(--border-color);
  border-left: 5px solid var(--border-color);
}

@keyframes startfirst {
  to{
    width: 410px;
    height: 560px;
  }
}
@keyframes startsecond {
  15%{
    width: 50px;
    height: 50px; 
  }
  60%{
    width: 408px;
    height: 558px; 
  }
  65%{
    width: 408px;
    height: 558px; 
  }
  100%{
    width: 50px;
    height: 50px;
  }
}

名片：首先设置名片的大小和半透明颜色。并设置backdrop-filter属性blur()，通过模糊body的背景产生一种玻璃质感。通过引入的动画库依次给名片盒子和其中的子元素设置动画样式和延迟，一个简单的效果就完成了～

.card{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 530px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  cursor: pointer;
  background-color: rgba(255,255,255,.3);
  backdrop-filter: blur(5px);
  box-shadow: 2px 2px 6px rgb(49, 49, 49);
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

br,p{
  animation-name: fadeInRight;
  animation-duration: 3.5s;
}
.photo{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 25px auto;
  background-image: url(https://up.36992.com/pic/36/a8/26/36a82622f8135920141e557e02612715.jpg);
  background-size: 260%;
  background-repeat: no-repeat;
  background-position: 52% 55%;
  filter: brightness(.9) contrast(1.2);
  animation-name: flipInY;
  animation-delay: 2s;
  animation-duration: 1.5s;
}
.name{
  text-align: center;
  font-family: arial, sanserif, '微软雅黑';
  font-size: 30px;
  letter-spacing: 2px;
  font-weight: bold;
  line-height: 30px;
  color: var(--font-color);
  margin-right: 13px;
  margin-bottom: 25px;
}
.name span{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(103, 233, 103);
  margin-right: 13px;
  vertical-align: middle;
}
hr{
  margin: 15px auto;
  width: 70%;
  border: .3px solid var(--border-color);
}
.description-detail p{
  font-family: sans-serif, '微软雅黑';
  font-size: 15px;
  font-weight: 500;
  width: 68%;
  margin: 35px auto;
  text-align: center;
}
.box span{
  display: inline-block;
  height: 30px;
  width: 70px;
  padding-left: 10px;
  text-align: left;
  line-height: 30px;
  background-color: var(--font-backcolor);
  color: #fff;
  border: 1.5px solid var(--border-color);
}
.box .details{
  width: 140px;
  color: black;
  background-color: rgba(255, 255, 222, .7);
  text-align: center;
}
.connection{
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.QQ, .Wechat, .weibo, .phone{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 12px;
  animation-name: bounceInUp;
  animation-delay: 1.8s;
  animation-duration: 1.5s;
  background-position: center center;
  background-size: 115%;
  background-repeat: no-repeat;
  transition: all .5s ease;
}
.QQ:hover, .Wechat:hover, .weibo:hover, .phone:hover{
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 0 6px black;
}
.QQ{
  background-image: url(https://bpic.588ku.com/element_origin_min_pic/01/31/11/93573b32d3ca6c1.jpg);
}
.Wechat{
  background-image: url(https://img1.baidu.com/it/u=2264422636,3910731772&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500);
}
.weibo{
  background-image: url(https://bpic.51yuansu.com/pic3/cover/03/60/15/5bd2bb8d53ac2_610.jpg);
}
.phone{
  background-image: url(https://bpic.51yuansu.com/pic3/cover/02/38/38/59c2623b4ce19_610.jpg);
}

效果展示

可能由于页面大小原因显示不完整，具体可以查看这个链接我的名片

avatar
文章
阅读
粉丝