当青训营遇上码上掘金 ｜ 我的名片

当青训营遇上码上掘金，我的名片就诞生啦 🥰

选题的原因

因为是第一次参加字节跳动青训营，还没入营前还是比较紧张和激动的，想在青训营学到贴近真正工程项目上的知识和技能，还能认识在前端领域中的技术大牛和同辈中优秀的同学，还是非常激动和期待的，虽然我才刚接触前端一年多了，但是学习的时间零零散散可能不到几个月，还没连续的学习前端技术，因此我想参加字节的寒假训练营来提升我个人的技术，扩展我的知识面，让我了解到一个工程项目的开发流程和常用的前端技术，为今后的学习打下良好的基础，也希望从这次的训练营中可以让我明白前端的学习路线，达到事半功倍的效果。

初来乍到，想结识朋友，因此个人名片是必不可少的，所以我选择这个题目，通过用网页的形式展示个人名片，让大家多多了解我。

功能介绍

作品展示如下图所示：

这个作品分为三个部分：

• 一个是左侧是图片，辅助右侧文字相关，让卡片不再单调；
• 一个是右侧的主体文字部分，用于详细说明，我设置了三个板块，分别为：基本信息、兴趣爱好、联系方式；
• 一个是下方的切换栏，用于切换不同板块，字体和按钮的颜色都是使用掘金首页配套的颜色

当切换板块时还会有过渡动画进行辅助，增加用户的体验效果！

技术介绍

这个小 demo 使用的是 HTML+CSS 技术：

• 首先布局还是用的万能的 flex 布局；
• 然后切换时的动画效果，使用的 transition 属性，给定开始和结束两个点的状态样式以及动画的延迟时间就可以做出精美的动画效果；
• 切换 Tab 栏使用的 label 标签当作出发元素，这样就能配套使用 :checked 伪类来进行选择，就不需要使用到 js 了，同时使用 ::before 伪元素当作背景，然后真正的元素用 scaleX() 来进行缩放，达到动画效果