当青训营遇上码上掘金
介绍
名片（Business card），是一种载有关于公司或个人的联系信息的卡片，常用于商务往来场合之中，作为一种便利和记忆辅助工具的共享。名片通常包括：姓名、单位或商业机构名称（通常带有商标）、以及联系信息（如：街道地址、电话号码、传真号码、电子邮件地址及网站）
事实上，名片作为人际交往的重要工具，当然也有追求个性的必要。而作为一名前端开发者，用前端代码制作一张充满个性，美观优雅的网页名片是一件，额，实用且很有自豪感的事情。下面我来分享如何制作一个滑动效果的个人名片，简单而优雅。
实现
- 名片可以分成四个大块
- 最外层容器
- 文字区域
- 右上角动态圆条
- 自定义图片区（二维码）
<div class="container">
<div class="text">
<a href="#">wql的名片</a>
<h2>WX:XXXXXXXXX</h2>
<span>我是一个前端小萌新....</br></span>
</div>
<div class="connor">
<!-- --i是用来计算平面圆柱的动效延迟和距离的
--w则是用来计算平面圆柱的宽度 -->
<div class="pillar1" style="--i:1;--w:1.5"></div>
<div class="pillar1" style="--i:2;--w:1.6"></div>
<div class="pillar1" style="--i:3;--w:1.4"></div>
<div class="pillar1" style="--i:4;--w:1.7"></div>
<div class="pillar2" style="--i:1"></div>
</div>
<!-- 设置二维码 -->
<div class="qr"></div>
- 最外层容器设置flex布局，背景色以及居中
.container{
position: relative;
width: 700px;
height: 400px;
border: #fff 10px solid;
background-color: rgb(120,140,200);
border-radius: 20px;
overflow: hidden;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.445);
filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.164));
}
- 文本区域
.text{
position: absolute;
width: 200px;
height: 300px;
left: 0;
margin: 75px 50px;
transition: 1s;
}
.text a{
text-decoration: none;
color: #fff;
font: 900 28px '';
}
.text h2{
/* 鼠标放开时的动画，第一个值是动画的过渡时间
第二个值是延迟一秒后执行动画 */
transition: .5s 1s;
opacity: 0;
color: rgb(30,210,200);
}
.text span{
transition: .5s 1s;
color: #fff;
font: 500 15px '';
position: absolute;
top: 70px;
}
- 右上角圆条
.connor{
position: absolute;
top: -130px;
right: -240px;
}
.pillar1,.pillar2{
position: absolute;
right: calc(var(--i)*100px);
width: calc(var(--w)*40px);
height: 500px;
overflow: hidden;
border-radius: 100px;
transform: rotateZ(220deg) translate(0,0);
background: rgb(240,220,150);
transition: .5s .5s;
}
.pillar1:nth-child(2){
background: rgb(240,190,230);
}
.pillar2{
left: -470px;
top: -140px;
width: 70px;
background-color: rgb(90,220,150);
}
- 自定义图片（二维码）
.qr{
width: 250px;
height: 250px;
position: absolute;
background-image: url(https://img1.baidu.com/it/u=1560903721,1741925443&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707);
background-size: cover;
margin: 70px;
opacity: 0;
transition: .5s;
}
个人总结
完成制作一张美观，简单且优雅的个人名片，首先需要完成整个名片代码结构的设计和划分，比如我就将整个名片划分了四个部分，并且每一个部分的设计都力求简单美观。然后就要开始考虑动画效果的问题。右上角的圆角动画，我参考了别人的一些动画效果，有一种圆滑且渐进的效果。而名片的主体文字部分，则非常灵活的移动，伴随联系方式的消失和出现，显得非常灵动。
