毛玻璃员工卡片悬停效果

效果展示

在这里插入图片描述

页面结构组成

通过效果展示图，我们可以看出页面布局比较常规，最核心的就是卡片，当鼠标没有悬停在卡片上时，文字和头像处于半透明状态，当鼠标悬停在卡片上是，底部会展示社交图标。

CSS 知识点

backdrop-filter 回顾
transition
transform

实现卡片基础布局

<div class="container"><div class="card"><div class="content"><div class="img_box"><img src="./images/user-1.jpg" /></div><div class="content_box"><h3>someone famous<br /><span>creative designer</span></h3></div></div><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>

实现卡片样式

.container .card {position: relative;width: 300px;height: 400px;background: rgba(255, 255, 255, 0.05);margin: 20px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);border-radius: 15px;display: flex;justify-content: center;align-items: center;backdrop-filter: blur(10px);
}.container .card .content {position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;opacity: 0.5;transition: 0.5s;
}.container .card:hover .content {opacity: 1;transform: translateY(-20px);
}.container .card .content .img_box {position: relative;width: 150px;height: 150px;border-radius: 50%;overflow: hidden;border: 10px solid rgba(0, 0, 0, 0.25);
}

实现社交图标动画

.container .card ul {position: absolute;bottom: 80px;display: flex;
}.container .card ul li {list-style: none;margin: 0 10px;transform: translateY(50px);transition: 0.5s;transition-delay: calc(0.1s * var(--i));opacity: 0;
}.container .card:hover ul li {/* 动画执行部分 */transform: translateY(30px);opacity: 1;
}