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

strange
97 阅读2分钟

当青训营遇上码上掘金

印象中一般的名片都长这样.

image.png

布局设计

首先, 参考上图的布局, 我希望把左侧二维码部分改成我的头像, 右侧布局保持一致. 然后, 再把名片里面需要的内容确认一下.

image.png

在这里主要讲名片划分为两部分内容, 一部分为图片, 一部分为文字内容. 这样划分的原因是方便管理图片资源. 写成html代码就如下所示.

<div>
    <img src="/" alt="头像">
</div>
<div>
    <h2>strange</h2>
    <div>Hello!</div>
    <div>telephone</div>
    <div>email</div>
</div>

不带任何样式的效果如下图 ( 这也太丑了吧 )

image.png

样式设计

为了让我的名片更好看, 我要加上一些样式.

首先, 我的名片是一个左右布局的名片, 左边为头像区域, 右边为文字区域, 因此, 我采用了flex布局, 并设置flex-direction : row, 这样就得到了行布局. 在细数那些惊艳一时的 CSS 属性 这篇文章中我了解到了gap属性. 因此这里通过设置gap属性来隔开图片部分和文字部分.

为了让我的名片看起来更生动, 我为文字内容加上了不一样的效果. 当鼠标移动到姓名上方, 将会在下方生成紫蓝色的阴影. 当鼠标移动到其他文字内容的上方, 字体会变大, 并且向下偏移.

此外, 我还希望我的头像可以有拍一拍的效果. 当鼠标移到头像上方, 图像会进行抖动. 这一部分的实现代码如下.

img:hover{
        animation: tada 1s .2s ease both;
        -moz-animation: tada 1s .2s ease both;
}

@keyframes tada{
    0%{-webkit-transform:scale(1);}
    10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(3deg);}
    40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(-3deg);}
    100%{-webkit-transform:scale(1) rotate(0);}
}

最终效果

(隐去代码部分查看效果更佳!)

改进

这个名片的内容还是比较简单, 希望之后可以给名片加上自定义样式和自定义内容的功能.

avatar
文章
阅读
粉丝