「青训营 X 码上掘金」制作头像仿掘金的个人名片

预览

[当青训营遇上码上掘金]

介绍

名片，又称卡片（粤语写作卡（kā）片），中国古代称名刺，是标示姓名及其所属组织、公司单位和联系方法的纸片。名片是新朋友互相认识、自我介绍的最快有效的方法。交换名片是商业交往的第一个标准官式动作

以上定义来自百度百科---名片。毫无疑问我们使用名片主要用于在双方都不熟悉的场景下，让对方能够快速了解自己想要让对方了解的一些基本信息，让双方能够有一些共同话题。

而作为程序员，使用代码做自我介绍是一件非常酷炫的事情，用HTML绘制一个网页来显示我们的名片是非常直观的，下面就让我们制作一张仿掘金头像鼠标悬浮加速的个人名片

结构规划

想要做一个这样的名片，那么肯定有一个容器来封装内部元素，我们暂且就以box来作为整体容器吧。有了容器，我们就得规划名片的结构了。这里的结构显而易见主要就是左右两边，左边主要显示我们想要展示的信息，右边就放我们的头像了。

好了，到现在我们的结构就差不多了，以下就是我们的代码了~

<div class="box">
    <div class="container">
        <div class="left">
            <ul>
                <li class="title">风和日暖，令人愿意永远活下去</li>
                <li>JohnsonXin的个人博客</li>
                <li>一名前端开肝工程师</li>
                <li>✨https://blog.reday.asia</li>
            </ul>
        </div>
        <div class="right">
            <div class="avatar">
                <img src="" alt="">
            </div>
        </div>
    </div>
</div>

样式

完成了结构部分，我们就该给我们的内容添上样式了，这里我们使用的是flex布局，不了解flex布局的朋友们可以百度一下昂~

头像旋转

头像旋转可以使用动画来制作的，这样做样式会和谐一些，有想法的朋友可以去研究研究，这里我们用的是transfrom---rotate()

从mdn上可以得到：rotate()函数主要用于围绕一个点旋转，正好是我们想要的，这里的turn就是圈的意思

666turn就是666圈。rotate函数主要接收角度也就是deg，所以 1 turn 等价于 360 deg

• transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
• transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）
• transition-timing-function 属性规定过渡效果的速度曲线
• cube-bezier() 函数定义三次贝塞尔曲线（Cubic Bezier curve）
  • cubic-bezier(x1,y1,x2,y2)

.avatar img:hover {
    transform: rotate(666turn);
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1);
}

好，以上就完成了我们的头像旋转了，其他样式就按自己喜欢的来渲染就好了

完整代码

以上就是今天的全部内容了，喜欢本篇文章得到或者说本篇文章对你有帮助的话可以点个赞哦~