青训营 X 码上掘金」主题创作:我的名片

用户3493817625623
106 阅读3分钟

当青训营遇上码上掘金

名片是向人介绍自我的重要工具，作为前端可以将自己的名片以web页面的形式发送给别人，这么做的名片可以有丰富的互动，并且可自定义想要展示的内容，可以展示自己的设计审美。

页面的简单互动可以使用纯CSS实现，利用好css的自带hover属性就可以实现一些有趣的互动。

以下可以先看到骨架部分，是一些简单的html，在这可以展示个人信息个你想要介绍兴趣爱好等：

<div class="wrap">
    <div class="box-top">
        <div class="image"></div>
    </div>
    <div class="box-bottom">
        <h2>MJ hula</h2>
        <span>trust yourself</span>
    </div>
    <div class="box-bottom2">
        <ul>
            <li>ID:3493817625623</li>
            <li>QQ:8844667799</li>
            <li>WX:MJ-Hula</li>
            <li>hobby:sing dance rap</li>
        </ul>
    </div>
</div>

这里将整个名片分为上下部分top和bottom，其中buttom又分为了buttom1和buttom2，1和2是用于展示hover后的不同内容。

接下则是比较重要的CSS部分了。

设置版心

先看到名片的最外层容器，最外层容器设置了版心样式：

  • 设置宽高；
  • 背景色，阴影效果；
  • overflow设置为hidden模式；
  • 下方设置两个圆角；
.wrap{
    position: relative;
    width: 380px;
    height: 280px;
    background-color: rgb(255,255,255);
    box-shadow: 0 0 10px rgb(0,0,0,.5);
    overflow: hidden;
    border-radius: 0 0 30px 30px;
}

上部样式

名片上部分用于展示个人头像：

  • 头像容器和头像图片遵循“父相子绝”
  • transition可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，过渡效果设置0.5s，详细可见：transition属性
.box-top{
    position: relative;
    width: 380px;
    height: 130px;
    background-color: rgb(215, 138, 200);
    display: flex;
    justify-content: center;
    transition: .5s;
}
/* 设置三角形 */
.box-top::after{
    content: '';
    width: 40px;
    height: 40px;
    clip-path: polygon(50% 40%,0 0,100% 0);
    background-color: rgb(180,180,210);
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -38px;
    z-index: 999;
}
/* 头像图片 */
.image{
    position: absolute;
    top: 20px;
    width: 90px;
    height: 90px;
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F11%2F20140711204107_Pi22S.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678524517&t=e3edfe707b81b05fdf7dc5d081487482");
    background-size: cover;
    border: 4px solid rgb(140,140,170);
    transition: .5s;
}

同时需要设置鼠标悬停的不同效果：

  • 减小top块的高度
  • 缩小img图片大小和重新调整图片位置
/* 鼠标移入的效果 */
.wrap:hover .box-top{
    height: 50px;
}
.wrap:hover .image{
    width: 35px;
    height: 35px;
    border-width: 3px;
    transform: translate(-140px,-15px);
}

下部样式

下部分同样存在鼠标悬停前后的两种展示内容,同样通过:hover和transition，这两种效果所展示的内容并不相同：

  • 这两大块的大小是一致的
.box-bottom,.box-bottom2{
    position: absolute;
    top: 130px;
    width: 380px;
    height: 150px;
    text-align: center;
    transition: .5s;
}

下部hover前样式

  • 设置字体样式
  • buttom内的h2标题样式
.box-bottom span{
    font: 400 24px 'Giddyup Std';
}
.box-bottom h2::after{
    content: '';
    display: block;
    width: 200px;
    height: 2px;
    background-color: #000;
    position: absolute;
    left: 50%;
    transform: translate(-50%,4px);
}

下部hover后样式

  • 设置buttom2的top位置,将其超出wrap版心位置隐藏起来;
.box-bottom2{
    top: 300px;
    height: 220px;
}

鼠标进入后:

  • 将buttom1的top位置设置为300px,即往下压;
  • 将buttom2的top位置设置为50px,即往上提;
  • 同时设置li列表的hover效果,主要是改变字体颜色;
.wrap:hover .box-bottom{
    top: 300px;
}
.wrap:hover .box-bottom2{
    top: 50px;
}
li:hover{
    color:rgb(109, 179, 248)
}

完整代码可见：我的名片

avatar
文章
阅读
粉丝