效果展示
页面结构
从上述的效果展示可以看到,页面是由多个卡片组成,并且鼠标悬停在卡片上时,会旋转用户图片并且韩式对应的用户信息框。
CSS3 知识点
- :has 属性的运用
实现页面整体结构
html
<div class="container">
<div class="card" data-color="clr1">
<div class="img_box">
<img src="images/user-1.jpg" />
</div>
<div class="glass">
<h3>
Someone
<br />
<span>SEO Expert</span>
</h3>
<ul>
<li style="--i: 1">
<a href="#">
<i class="fa fa-qq" aria-hidden="true"></i>
</a>
</li>
<li style="--i: 2">
<a href="#">
<i class="fa fa-weixin" aria-hidden="true"></i>
</a>
</li>
<li style="--i: 3">
<a href="#">
<i class="fa fa-weibo" aria-hidden="true"></i>
</a>
</li>
<li style="--i: 4">
<a href="#">
<i class="fa fa-tencent-weibo" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
实现卡片基础样式
css
.container .card {
position: relative;
width: 200px;
height: 200px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
实现用户头像样式
css
.container .card .img_box {
position: absolute;
inset: 0;
border-radius: 12px;
border: 4px solid rgba(0, 0, 0, 0.2);
}
.container .card .img_box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
border-radius: 10px;
}
.container .card:hover .img_box img {
opacity: 0.5;
}
实现用户信息框样式
css
.container .card .glass {
position: absolute;
inset: 0;
background: linear-gradient(#fff2, transparent);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(15px);
border-radius: 10px;
scale: 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}
.container .card .glass::before {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: rgba(255, 255, 255, 0.05);
}
.container .card ul {
position: absolute;
bottom: 14px;
width: 100%;
display: flex;
justify-content: center;
gap: 15px;
}
.container .card ul li {
list-style: none;
}
.container .card ul a {
color: #fff8;
font-size: 1.25em;
scale: 0;
transition: 0.25s;
transition-delay: scale calc(0.2s * var(--i));
}
.container .card:hover ul a {
scale: 1;
}
.container .card ul a:hover {
color: #fff;
}
实现对应的悬停样式
css
.container .card:hover .img_box img {
opacity: 0.5;
}
.container .card:hover {
transform: rotate(-15deg);
}
.container .card:hover .glass {
scale: 1;
opacity: 1;
transform: rotate(20deg);
}
使用 has 属性修改背景颜色
css
body:has(.card[data-color="clr1"]:hover) {
background: #d18c55;
}
body:has(.card[data-color="clr2"]:hover) {
background: #fff6a3;
}
body:has(.card[data-color="clr3"]:hover) {
background: #eeb973;
}
body:has(.card[data-color="clr4"]:hover) {
background: #f7f3ea;
}