青训营 X 码上掘金：我的名片

当青训营遇上码上掘金

非常荣幸能参加第五届青训营前端专场活动。在此次的当青训营遇上码上掘金活动中，我选择主题 1 进行制作。

主题介绍

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

创作思路

名片是一种向他人展示自己的媒介，鉴于程序员的才能，我们除了在名片上展示一些明显的基本信息外，还可以通过代码实现一些可以互动的动画效果，从而增加吸引力，并可以向同行展示更具有专业性的能力，进一步提升宣传效果。

核心功能实现

• 动画效果

  • 卡片整体使用封面 + 内容模式。当鼠标不悬停在卡片上时，默认显示封面文字；当鼠标悬停在卡片上时，封面文字逐渐消失，卡片内容逐渐上移显示；当鼠标移出卡片时，封面文字逐渐显示，卡片内容逐渐下移隐藏。该过程主要使用了 CSS3 中的 transform 和 animation 属性，其具体实现如下：

    .container .card .cover{
        position: absolute;
        color: #fff;
        text-align: center;
        /* 封面默认显示 */
        opacity: 1; 
        animation: fadeIn linear 0.3s;
    }
    .container .card:hover .cover{
        /* 鼠标移入逐渐消失 */
        opacity: 0;
        animation: fadeOut linear 0.3s;
    }
    .container .card .content{
        padding: 20px;
        text-align: center;
        /* 默认下移 + 隐藏 */
        transform: translateY(100px);
        opacity: 0;
        transition: 0.5s;
    }
    .container .card:hover .content{
        /* 鼠标移入上移 + 显示 */
        transform: translateY(0);
        opacity: 1;
    }
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
     
      100% {
        opacity: 1;
      }
    }
    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
     
      100% {
        opacity: 0;
      }
    }
    ​
    

  • 头像旋转。鼠标悬浮在头像上时，会进行旋转，增加交互性。该功能主要使用了 transform 属性实现，具体实现如下：

    .container .card .content img:hover{
        /* 头像鼠标悬浮旋转效果 */
        transform: rotate(360deg);
        transition: 0.5s;
    }
    

• 交互效果

  • 为了增加交互性，卡片还使用了鼠标悬浮倾斜的功能，当鼠标停留在卡片上时，会根据鼠标的点位进行倾斜，从而挺高更为真实的交互效果。该功能主要使用了 vanilla-tilt.js 库实现，具体如下：

    VanillaTilt.init(document.querySelectorAll(".card"), {
      max: 15,  //最大倾斜度数
      speed: 400,  //倾斜转换的速度
      glare: true,  //是否开启眩光效果
      "max-glare": 1  //最大眩光的不透明度
    })
    

代码

效果展示

结语

希望通过这次青训营活动结识更多小伙伴，在技术学习的道路上多增添一份乐趣。也祝青训营越办越好！