当青训营遇上码上掘金

活动选题【我的名片】

本次参与了码上掘金活动，选择主题为“我的名片”，选择技术为简单的HTML+CSS，并且实现CSS翻转div效果

代码实现

构想

首先使用一个网页来进行我的名片的展示，名片的正面选择使用div进行的一个卡片展示，卡片上是简单的个人介绍，通过div翻转效果可查看卡片背面，在卡片背面可设置自己的一些语录和图片之类的信息

页面代码如下：

<div class="box">
<div class="card">
   <section>
    <h2>CYY<span>软件工程专业</span> </h2>
    <img src="yy.png" alt="">
    <ul>
      <li>电话 / 18894893401</li>
      <li>邮箱 / 2398456592@qq.com</li>
      <li>地址 / xxxx</li>
    </ul>
  </section>
</div>
<div class="car2">
  <span>444444444</span>
  <img src="">
</div>
</div>

其中div class=“card”为卡片正面，包含信息有姓名、电话等，div class=“car2”为卡片背面，包含信息可以为语录、图片等

CSS代码如下：

分块解析

卡片实现

在CSS代码中将div利用border-radius: 10px为其实现盒子图形的设置边，并且设置合适大小，从而实现div以卡片形式展现

卡片渐变效果

在CSS代码中使用属性 background: linear-gradient(#fdbecc, #c0f5e3);设置渐变颜色，linear-gradient为线性渐变，Radial Gradients为径向渐变，通过伪元素before和after分别实现卡片左右两边的渐变，使得卡片渐变颜色更加丰富好看

.card{
    width: 600px;
    height: 460px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -300px;
    background: #efe6f1;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(#fdbecc, #c0f5e3);
    transition: all .3s;
}
.car2{
   position: absolute;
    background: #98869c;
    overflow: hidden;
    border-radius: 10px;
    background-image: linear-gradient(#e2a0ae, #d5efd8);
     transition: all .3s ease;
     opacity: 0;
}
.card:before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: linear-gradient(45deg, #8ed3e1 8%, transparent, #efe6f1);
    bottom: -53px;
    left: -87px;
}
 
.card:after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 100%;
    background: radial-gradient(#afdfef, #c8e8f2, transparent 60%, #efe6f1);
    top: -123px;
    right: -352px;
}

卡片翻转效果

实现两个div同时进行翻转，开始下面的盒子设置透明度来隐藏，而后设置上面盒子旋转度为90是，透明度为0，下面盒子透明度为1，即可实现卡片翻转视觉效果

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 40px -24px rgb(246, 210, 210);
  animation: move01 2s linear forwards;
}
@keyframes move01{
  1%{
    opacity: 1;
  }
  25%{
    transform:rotateY(0);
  }
  62%{opacity: 1;}
  62.5%{
    transform: rotateY(90deg);
    opacity: 0;
  }
  100%{opacity: 0;}
}
.car2:hover{
  transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgb(246, 210, 210);
  animation: move02 1.5s 0.5s linear forwards;
}
@keyframes move02{
  48%{
    opacity: 0;
  }
  49%{
    opacity: 1;
  }
  50%{
    transform: rotateY(90deg);
  }
  100%{
    transform: rotateY(18deg);
    opacity: 1;
  }
}

演示效果如下

卡片正面

卡片翻转效果 5YDE37LN3RKUF3V$Y4_SIMC.png
卡片背面

ZEKJL6HXA{RHQ3PONHHIW8G.png

总结

本次实现我的名片比较简单，由于不熟悉码上掘金平台的开发方法，原计划实现点击跳转页面未能实现，只能用最简单的HTML+CSS进行开发，使用CSS的元素属性进行界面设计，以及卡片设置，并且实现渐变和翻转效果，感觉还是可以看得过去的

CBI|个人名片