毛玻璃员工卡片悬停效果

news2024/11/28 14:51:37

效果展示

在这里插入图片描述

页面结构组成

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

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;
}