CSS 实现个人资料卡

效果展示

在这里插入图片描述

CSS 知识点

CSS 综合知识运用

页面整体布局

<div class="card"><div class="imgBox"><img src="./bg.jpg" /></div><div class="content"><div class="details"><h2>Alina Smith<br /><span>Senior UX/UI Designer</span></h2><div class="data"><h3>342<br /><span>Posts</span></h3><h3>120K<br /><span>Followers</span></h3><h3>285<br /><span>Following</span></h3></div><div class="actionBtn"><button>Follow</button><button>Message</button></div></div></div>
</div>

实现个人资料卡基本样式和鼠标悬停样式

.card {position: relative;width: 350px;height: 190px;background: #fff;border-radius: 20px;box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);transition: 0.5s;
}.card:hover {height: 450px;
}

编写图片个人资料头像样式

.imgBox {position: absolute;top: -50px;left: 50%;transform: translateX(-50%);width: 150px;height: 150px;background: #fff;border-radius: 20px;box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);overflow: hidden;transition: 0.5s;
}.imgBox img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;
}.card:hover .imgBox {width: 250px;height: 250px;
}

编写个人资料卡信息部分基础样式

.card {/* 为了方便编写个人资料卡信息部分的样式，我们这里把高度改为450px */height: 450px;
}.card .content {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: flex-end;
}.card .content .details {padding: 40px;text-align: center;width: 100%;transition: 0.5s;
}

编写个人资料卡信息数据样式

.card .content .details h2 {font-size: 1.25em;font-weight: 600;color: #555;line-height: 1.2em;
}.card .content .details h2 span {font-size: 0.75em;font-weight: 500;opacity: 0.5;
}.card .content .details .data {display: flex;justify-content: space-between;margin: 20px 0;
}.card .content .details .data h3 {font-size: 1em;color: #555;line-height: 1.2em;font-weight: 600;
}.card .content .details .data h3 span {font-size: 0.85em;font-weight: 400;opacity: 0.5;
}.card .content .details .actionBtn {display: flex;justify-content: space-between;
}.card .content .details .actionBtn button {padding: 10px 30px;border-radius: 5px;border: none;outline: none;font-size: 1em;font-weight: 500;background: #ff5f95;color: #fff;cursor: pointer;
}.card .content .details .actionBtn button:nth-child(2) {border: 1px solid #999;color: #999;background: #fff;
}

编写资料卡信息部分悬停样式

.card {/* 把这里的高度改为190px */height: 190px;
}.card .content {overflow: hidden;
}.card .content .details {transform: translateY(150px);
}.card:hover .content .details {transform: translateY(0px);
}