当青训营遇上码上掘金

主题介绍——我的名片

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

板块设计

板块划分

整体将个人名片分为两个部分：头像部分与信息部分其中，信息部分包括内容信息与链接信息，链接信息中使用特定图标进行对应链接的跳转

实现效果

使用动态展开的效果，在鼠标未悬停时仅仅展示头像与名字，当鼠标悬停（hover）时将个人名片进行展开并将信息进行充分展示

效果设计

流光设计

在卡片的外侧进行了流光设计。利用伪元素选择器::before和::after，外侧流光设计的本质其实就是先添加一个带有渐变色彩的方形线条，然后将该线条添加旋转动画，并通过before和after以及设置overflow设置遮罩仅展现围绕名片周围的一圈即可。如果想实现反方向转，只需要将ketframe的rotate角度调换即可。由于要实现流光的效果，这里使用透明度渐变来实现类似光效的效果

.card .lines {
    position: absolute;
    inset: 0;
    background: #f3f3f3;
    overflow: hidden;
}

.card .lines::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 120px;
    background: linear-gradient(transparent, #ec8a00, #ec8a00, #ec8a00, transparent);
    animation: animate 4s linear infinite;
}

@keyframes animate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.card .lines::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #f0f0f0;
}

展示的效果为

截屏2023-02-10 12.02.24.png

如果没有经过渐变处理，那么纯色的背景进行裁切遮罩实现的流光效果将会大打折扣

background: #ec8a00;

展示效果为：截屏2023-02-10 12.15.15.png

链接按钮

卡片信息底部设计了链接跳转，指向b站、github和qq三个外部链接

头像

头像十分简单，与名片一样采用了动态放大的效果。图片素材取自Unsplash，一个免版权的高质量图片素材网站，向大家推荐。

我的名片创作记录