效果展示
CSS 知识点
- CSS 基础知识回顾
- transition-delay 属性的运用
整体页面布局实现
html
复制代码
<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>
实现整体用户卡片样式
css
复制代码
.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;
}
实现用户头像样式
css
复制代码
.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;
}
实现用户信息部分样式
css
复制代码
.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;
}
实现用户社交信息展示的按钮样式
css
复制代码
.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 实现按钮交互事件
javascript
复制代码
let toggle = document.querySelector(".toggle");
let card = document.querySelector(".card");
toggle.onclick = () => {
card.classList.toggle("active");
};
编写社交项的样式
css
复制代码
.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;
}
/* 剩余样式在完整代码中展示 */
编写卡片激活后的样式
css
复制代码
/* 只是展示部分样式 */
.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);
}
完整代码下载
完整代码下载