CSS实现一个个人卡片-致敬网易云选手的身份实现一个个人卡片作为一名资深网易云选手，看到了一个个人卡片布局，我瞬间就想

实现一个个人卡片

作为一名资深网易云选手，看到了一个个人卡片布局，我瞬间就想到了网易云音乐。

网易云个人资料是这样的

然后我这里是一个简化了的卡片，当鼠标hover时，会改变其大小和类型。将其他的一些文字给显示出来。里面的掘金样式可以点击，会跳转至我的掘金账号。

实现原理

整体布局

主体部分包含了一个 div 元素，该元素的类名为 .card，用于表示卡片的整体布局。
.card 元素包含了两个子元素：.imgBox 用于展示头像，.content 中包含了个人信息和操作按钮。
.details 元素用于展示个人信息，包括所在地区、社交网络和个人介绍等。
.data 元素中包含了 14 个动态、33 个关注和10 个粉丝的数据展示，使用了 h3 标签进行展示，并给这些数据添加了一些样式。
.Btn 元素中包含了两个按钮，一个是关注按钮，另一个是私信按钮。私信按钮使用了 SVG 图标进行展示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人卡片</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <div class="card">
        <div class="imgBox">
            <img src="https://p1.music.126.net/pk2BTJx_Av2xYP8YbRqPKw==/109951165604877087.jpg?param=180y180" alt="">
        </div>
        <div class="content">
            <div class="details">
                <div class="group">
                        <h4>所在地区:&nbsp;<span>江西省南昌市</span></h4>
                        <h4>社交网络:&nbsp;<span><a href="https://juejin.cn/user/4341314038804935"><img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/gold.981a5510.svg" alt="gold" class="icon source-icon" data-v-96420278=""></a></span></h4>
                        <h4>个人介绍:&nbsp;<span>一名喜欢听音乐的程序员</span></h4>
                    </div>
                <div class="data">
                    <div>
                        <h3>14 <br><span>动态</span></h3>
                    </div>
                    <span style="border:solid 0.1px #555;"></span>
                    <div>
                        <h3>33 <br><span>关注</span></h3>
                    </div>
                    <span style="border:solid 1px #555;"></span>
                    <div>
                        <h3>10 <br><span>粉丝</span></h3>
                    </div>
                </div>
                <div class="Btn">
                    <button>+关注</button>
                    <button><span><svg t="1683123965373" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2236" width="200" height="200"><path d="M887.808 841.04533332H129.024c-35.84 0-65.024-29.184-65.024-65.024V219.98933332c0-35.84 29.184-65.024 65.024-65.024h759.296c35.84 0 65.024 29.184 65.024 65.024v556.032c-0.512 35.84-29.696 65.024-65.536 65.024zM129.024 206.16533332c-7.68 0-13.824 6.144-13.824 13.824v556.032c0 7.68 6.144 13.824 13.824 13.824h759.296c7.68 0 13.824-6.144 13.824-13.824V219.98933332c0-7.68-6.144-13.824-13.824-13.824H129.024z" fill="#000000" p-id="2237"></path><path d="M486.912 555.86133332L203.264 272.21333332c-10.24-10.24-10.24-26.112 0-36.352s26.112-10.24 36.352 0l283.648 283.648c10.24 10.24 10.24 26.112 0 36.352-10.24 9.728-26.624 9.728-36.352 0z" fill="#000000" p-id="2238"></path><path d="M813.568 271.18933332l-283.648 283.648c-10.24 10.24-26.112 10.24-36.352 0s-10.24-26.112 0-36.352l283.648-283.648c10.24-10.24 26.112-10.24 36.352 0 9.728 10.24 9.728 26.624 0 36.352z" fill="#000000" p-id="2239"></path></svg></span> <span>私信</span> </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS核心

下面是对这段代码的分析：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

该段代码为所有元素设置了一些默认值，如去除外边距、内边距，设置盒模型为 border-box，并设置了默认的字体。这些设置有助于使页面中的所有元素表现出一致的默认外观和样式。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #fbda61, #ff5acd)
}

该段代码定义了页面主体的样式，包括将页面主体以水平和垂直方向居中，设置了页面主体的最小高度，并设置了一个背景色渐变。最小高度设置为 100vh，能使页面至少占据整个视口的高度，也就是占了整个可见区域，保证页面主体内容能够铺满。

.card {
    background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2242c60f0b0127977f5f543841940b40.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_960%2ch_540);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 20rem;
    height: 12rem;
    /* background: #fff; */
    border-radius: 1.5rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.15);
    transition: 1.25s;
    color: white;
}

该段代码定义了卡片的样式，包括卡片背景图、大小、边框半径、阴影和颜色等属性。并增加了一个过渡属性，使卡片在鼠标悬停时产生一个渐变的变化效果。

.card:hover {
    height: 26rem;
    background-image: url(https://wallpaper-static.cheetahfun.com/wallpaper/sites/mobile/statics/anime/1.jpg);
}

该段代码是在卡片上鼠标悬停时会将卡片高度增加并更换背景图片，以实现卡片的动态变化。

.imgBox {
    position: absolute;
    left: 50%;
    top: -5rem;
    transform: translateX(-50%);
    width: 10rem;
    height: 10rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1rem 5rem rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: 1.25s;
}

该代码用于定义位于卡片顶部的圆形图像外层容器的样式，包括容器的大小、背景和阴影等属性。它设置了一个过渡属性，使卡片在鼠标悬停时产生一个渐变的变化效果。

.card:hover .imgBox {
    width: 14rem;
    height: 14rem;
    border-radius: 1.5rem;
}

该段代码是在卡片上鼠标悬停时将圆形图像外层容器的大小进行调整，以实现图像的放大效果。

.card .content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}

该段代码用于定义卡片内容区域的样式，包括内容区域的大小、位置和布局等属性。其中 display: flex; 和 justify-content: center; 以及 align-items: flex-end; 设置了内容区域的位置和布局。而 overflow: hidden; 则使卡片内容在超出内容区域时不出现滚动条，以达到一个更好的视觉效果。

.card .content .details {
    padding: 2rem;
    text-align: center;
    width: 100%;
    transition: 1.25s;
    transform: translateY(9rem);
}

该段代码用于定义位于卡片底部的个人信息区域的样式，包括区域内部的间距、文字的居中布局等属性。并设置了一个过渡属性，使个人信息在卡片上鼠标悬停时产生一个向上的滑动效果。

.card:hover .content .details {
    padding: 2rem;
    text-align: center;
    width: 100%;
    transition: 1.25s;
    transform: translateY(0rem);
}

该段代码在卡片上鼠标悬停时，将个人信息区域滑动到原位置，实现信息区域的动态效果。

.card .content .details h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;

该段代码用于定义位于个人信息区域的标题的样式，包括标题的字体大小、字重和颜色等属性。

.card .content .details h2 span {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.5;
}

该段样式用于设置个人信息区域的小标题样式，包括字体大小、字重和透明度等。

.card .content .details .data{
    display: flex;
    justify-content: space-between;
    margin: 1.5rem 0;   
}

.card .content .details .data h3{
    font-size: 1rem;
    color: #fff;
    line-height: 1.2rem;
    font-weight: 600;
}

.card .content .details .data h3 span{
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.5;
}

该段样式用于定义个人信息区域的数据显示，包括显示数据的布局、数据的字体大小和颜色等属性。

.card .content .details .Btn{
    width: 16rem;
   display: flex;
   justify-content: space-between;
}
.card .content .details .Btn button{
    padding: 0.75rem 2.25rem;
    border-radius: 0.75rem;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.card .content .details .Btn button svg{
    text-align: center;
    width:  1rem;
    height: 1rem;
}

该段样式为个人信息区域的操作按钮样式，包括按钮的大小、颜色、轮廓和字体大小等属性。

整体css代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #fbda61, #ff5acd)
}

.card {
    background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2242c60f0b0127977f5f543841940b40.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_960%2ch_540);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 20rem;
    height: 12rem;
    border-radius: 1.5rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.15);
    transition: 1.25s;
    color: white;
}

.card:hover {
    height: 26rem;
    background-image: url(https://wallpaper-static.cheetahfun.com/wallpaper/sites/mobile/statics/anime/1.jpg);
}

.imgBox {
    position: absolute;
    left: 50%;
    top: -5rem;
    transform: translateX(-50%);
    width: 10rem;
    height: 10rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1rem 5rem rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: 1.25s;
}

.card:hover .imgBox {
    width: 14rem;
    height: 14rem;
    border-radius: 1.5rem;
}

.imgBox img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card .content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}

.card .content .details {
    padding: 2rem;
    text-align: center;
    width: 100%;
    transition: 1.25s;
    transform: translateY(9rem);
}
.card .content .details .group{
    text-align: left;
    color: #fff;
}
.card .content .details .group h4{
    padding-bottom: 0.25rem;
 }
.card .content .details .group span{
   
    opacity: 0.5;
 }
.card .content .details .group a img{
    width: 1rem;
    height: 1rem;
 }
.card:hover .content .details {
    padding: 2rem;
    text-align: center;
    width: 100%;
    transition: 1.25s;
    transform: translateY(0rem);
    
}

.card .content .details h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2rem;
}


.card .content .details h2 span {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.5;
}
.card .content .details .data{
    display: flex;
    justify-content: space-between;
    margin: 1.5rem 0;
   
}

.card .content .details .data h3{
    font-size: 1rem;
    color: #fff;
    line-height: 1.2rem;
    font-weight: 600;
}
.card .content .details .data h3 span{
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.5;
}
.card .content .details .Btn button svg{
    text-align: center;
    width:  1rem;
    height: 1rem;
}
.card .content .details .Btn{
    width: 16rem;
   display: flex;
   justify-content: space-between;
}
.card .content .details .Btn button{
    padding: 0.75rem 2.25rem;
    border-radius: 0.75rem;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

源码

掘金/个人卡片 · Mr-W-Y-P/Html-css-js-demo - 码云 - 开源中国 (gitee.com)

效果展示链接个人卡片 (mr-wang-y-p.github.io)