当青训营遇上码上掘金

要不是这次青训营的宣传。我还真会错过这个优秀的在线代码编辑器（码上掘金）。以前一直使用的是国外的codepen，访问速度实在是感人。而且比起codepen，码上掘金还有相当多的预制模板可以是直接使用，甚至还有自定义模板！写小项目的体验绝对好评！

选题：我的名片

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

基本需求

我们来自中国的各个地方，之前彼此都不认识。借助字节青训营这个平台，我们遇见很多志同道合的，相同爱好的人。但是毕竟刚刚遇见，基本信息还是需要介绍的。既然是个前端，那就写一个小电子名片吧！名片名片，总要有姓名电话 email 学校吧！

编码过程

HTML部分

感觉英文比中文好看呢。所以这里全部写了英文。涵盖了所需的基本信息，姓名是最重要的，必须大大大嘛！

<div class="card">
    <div class="card-img"/>
    <div class="card-info">
        <h3>Ni ChengKai</h3>
        <p>Student of SSPU</p>
        <p>Phone: +18701876153</p>
        <p>Email: 2507983704@qq.com</p>
    </div>
</div>

CSS部分

作为一个名片，除了名字，最重要的就是照片了吧！ emm，我长得不好看，这里用网图替代。为了在不遮挡信息的前提下尽可能的让图片大（与普通名片不同），这里用一层黑色的mask垫底，做了个半透明遮罩显示信息！（完整代码见文末）

.card {
    width: 300px;
    height: 500px;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.card-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(图片地址);
    background-size: cover;
}
.card-info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

JavaScript部分

单单就这样似乎有些单调（一点JS都没有，太捞了），那就加一点鼠标动效吧！鼠标经过图片会微微晃动。使用到了mousemove这个事件。

const card = document.querySelector('.card');
card.addEventListener('mousemove', (e) => {
    let xAxis = (window.innerWidth / 2 - e.pageX) / 30;
    let yAxis = (window.innerHeight / 2 - e.pageY) / 30;
    card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});

效果展示

效果图

完整代码

码上掘金结合掘金社区的MD文档写作，效果还挺好看。

「字节青训营 X 码上掘金」我入营了！