当青训营遇上码上掘金

效果

主题1：我的名片

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

名片.gif

灵感源自贴吧。最近找到了美琴的学生证【御坂美琴吧】_百度贴吧 (baidu.com)

介绍

“你指尖跃动的电光，是我此生不灭的信仰，唯我超电磁炮永世长存！”

名片通过纯HTML+CSS实现，当鼠标移入名片范围，名片会自动放大并显示阴影效果，名片内元素适配名片大小的变化。名片内提供一个可交互的呱太图标，鼠标移入图标时，该图标会自动旋转为竖直状态，鼠标移出图标，图标倾斜30°。

实现过程：

名片主体

名片主体是H5的main元素，采用flex布局，并设置伪类，当鼠标移入时元素整体扩大，并在元素底部显示阴影效果，触发伪类事件的延迟时间是200ms。名片主体分3个部分，上面的是学校和学号信息，中间的是学生证标识，下面的是个人信息，均为flex布局的子元素，flex布局采用垂直排列方式。

整体结构：

<main class="container">
    <div class="school-tab">头部信息部分...</div>
    <div class="card-label">学生证标识...</div>
    <div class="main-info">个人信息部分...</div>
</main>

主体部分的样式：

.container {
    box-sizing: border-box;
    width: 608px;
    height: 361px;
    background-color: #f1f1f1;
    overflow: auto;
    transition: 200ms;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container:hover {
    width: 640px;
    height: 380px;
    box-shadow: 10px 10px 10px #707070;
}

学校和学号

学校和学号信息是名片主体的flex子元素，它们自身也是flex布局的元素，设置水平和垂直方向居中对齐，调整了校徽和左边框的边距，并设置校名和学号的字体。

学校和学号部分的结构：

<div class="school-tab">
   <div class="school-banner">
      <img class="school-logo" alt="logo" src="https://i.imgtg.com/2023/01/25/SvYdI.png">
      <span class="school-name">常盘台中学</span>
   </div>
   <div class="uid"><span>No.</span> <span>000000003</span></div>
</div>

布局：

.school-logo {
    width: 3em;
}

.school-name {
    padding-left: 10px;
    font-family: serif;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
}

.uid {
    flex: 1;
    text-align: right;
    font-size: 30px;
    padding-right: 10px;
}

.uid span {
    font-family: "Monotype Corsiva", fantasy;
}

.school-tab {
    flex: 1;
    padding: 10px;
    display: flex;
    align-items: center;
}

.school-banner {
    flex: 1;
    display: flex;
    align-items: center;
}

学生证标识

只是一行简单的文本，调整了对齐方式、字体和文本大小。

结构：

<div class="card-label">··········· 学 生 证 ···········</div>

布局：

.card-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: monospace;
}

个人信息部分

个人信息部分在水平方向分为3个部分，左边是证件照，中间是个人基本信息，右边是呱太图标。水平方向也是由flex布局实现，调整了证件照和呱太的边框，调整了个人信息的字体、字号和行距。

结构：

<div class="main-info">
   <div class="stu-info">
      <img class="profile" src="https://i.imgtg.com/2023/01/25/SvsUG.webp" alt="profile">
      <ul class="base-info">
         <li>姓名：御坂美琴</li>
         <li>性别：女</li>
         <li>年级：二年级</li>
         <li>级别：超能力者</li>
         <li>能力：超电磁炮</li>
      </ul>
      <img class="guatai" src="https://i.imgtg.com/2023/01/25/SvVy1.png" alt="GuaTai">
   </div>
</div>

布局：

.main-info {
    flex: 4;
    display: flex;
    align-items: center;
}

.profile {
    margin-left: 30px;
    margin-right: 30px;
    border: dotted 2px #56b252;
    width: 10em;
}

.base-info {
    flex: 2;
    line-height: 1.5em;
    font-size: 20px;
    font-family: '华文行楷', serif;
}

.stu-info {
    display: flex;
}

.guatai {
    border-radius: 10px;
    width: 6em;
    height: 10em;
    margin-left: 40px;
    box-shadow:10px 10px 10px #707070;
    transform: rotate(30deg);
    transition: 100ms;
}
.guatai:hover{
    transform: none;
}

整体效果如下：

总结

感谢「第五届字节跳动青训营」活动提供给我这一次练手的机会，这还是我第一次真正用纯HTML+CSS从头构建一个页面，之前套用第三方库，套用一些模板，并不能很好的了解HTML和CSS的特性，甚至有些属性的意义都不甚了解。通过这次实践，我进一步熟悉了CSS的用法，虽然效果并不惊艳，甚至有点丑陋，但希望以后继续学习研究，不断进步。

最后：“就算是我，也可以战斗，就算是我，也可以成为你的力量！” ——御坂美琴（镰池和马，《魔法禁书目录16》

参考链接

CSS阴影_css 阴影_Joker_ZzzZ_的博客-CSDN博客

css旋转属性如何理解_很酷的站长的博客-CSDN博客_css 旋转

一文让你学会flex布局关于主轴、侧轴的布局方式_赵大宝子的博客-CSDN博客_flex主轴

「青训营 X 码上掘金」制作一个有阴影效果的名片

效果

介绍