效果展示

CSS 知识点

• CSS 基础知识回顾
• transition-delay 属性的运用

整体页面布局实现

<div class="card"><div class="user"><div class="img_box"><img src="bg.jpg" /></div><div class="content"><h2>Someone Famous<br /><span>Product Designer</span></h2></div><span class="toggle"></span></div><ul class="contact"><li style="--clr: #c71610;--i:0"><a href="#"><div class="icon_box"><i class="fa-solid fa-envelope"></i></div><p>someone@email.com</p></a></li><li style="--clr: #171515;--i:1"><a href="#"><div class="icon_box"><i class="fa-brands fa-weixin"></i></div><p>18372876781</p></a></li><li style="--clr: #0a66c2;--i:2"><a href="#"><div class="icon_box"><i class="fa-brands fa-qq"></i></div><p>38572913</p></a></li></ul>
</div>

实现整体用户卡片样式

.card {position: relative;height: 100px;transition: 0.5s;transition-delay: 0.5s;
}.card .user {position: relative;width: 400px;min-height: 150px;background: #2196f3;display: flex;justify-content: center;align-items: center;flex-direction: column;gap: 10px;border-radius: 10px;padding: 60px 40px 30px;
}

实现用户头像样式

.card .user .img_box {position: absolute;top: 0;transform: translateY(-50%);width: 100px;height: 100px;border-radius: 50%;border: 6px solid #fff;overflow: hidden;transition: 0.5s;z-index: 10;
}.card .user .img_box img {position: absolute;width: 100%;height: 100%;object-fit: cover;
}

实现用户信息部分样式

.card .user .content {position: relative;text-align: center;
}.card .user .content h2 {font-size: 1.2em;line-height: 1.05;color: #fff;
}.card .user .content h2 span {font-size: 0.75em;font-weight: 400;
}

实现用户社交信息展示的按钮样式

.card .user .toggle {position: absolute;bottom: 0;width: 120px;padding: 5px 15px;background: #fff;border-radius: 30px;transform: translateY(50%);border: 6px solid var(--bg);text-align: center;cursor: pointer;font-weight: 500;transition: 0.5s;
}.card .user .toggle::before {content: "Hire me";
}

使用 JavaScript 实现按钮交互事件

let toggle = document.querySelector(".toggle");
let card = document.querySelector(".card");toggle.onclick = () => {card.classList.toggle("active");
};

编写社交项的样式

.card .contact {position: relative;top: 30px;width: 100%;height: 0;display: flex;overflow: hidden;flex-direction: column;gap: 10px;transition: 0.5s;
}.card .contact li {list-style: none;width: 100%;min-height: 100px;background: #fff;border-radius: 10px;display: flex;transition: 0.5s;opacity: 0;transform: scale(0);padding: 10px 30px;
}/* 剩余样式在完整代码中展示 */

编写卡片激活后的样式

/* 只是展示部分样式 */.card.active {height: 450px;transition-delay: 0;
}.card.active .user .toggle {background: #ff4383;color: #fff;
}.card.active .contact {height: 325px;
}.card.active .contact li {opacity: 1;transform: scale(1);transition-delay: calc(0.25s * var(--i));
}.card.active .contact:hover li {opacity: 0.15;filter: blur(2px);transition-delay: 0s;
}.card.active .contact li:hover {opacity: 1;filter: blur(0px);
}

完整代码下载

完整代码下载