CSS实现热门创作者排行榜（毛玻璃效果）

CSS实现热门创作者排行榜（毛玻璃效果）

效果展示

CSS 知识点

• CSS 基础知识回顾
• filter 属性运用回顾

整体页面布局实现

<div class="container">
  <h3>Popular Creator Rank List</h3>
  <!-- 用户列表容器 -->
  <div class="box">
    <!-- 这里只是展示一个用户数据 -->
    <div class="list">
      <div class="imgBx">
        <img
          src="https://i.pinimg.com/564x/cc/45/7f/cc457fc473184cf7c595dc091fadd755.jpg"
        />
      </div>
      <div class="content">
        <h2 class="rank"><small>#</small>1</h2>
        <h4>Ricardo Flanagan</h4>
        <p>Digital Artist</p>
      </div>
    </div>
  </div>
</div>

实现用户列表框大致样式

.box {
  position: relative;
  min-width: 350px;
}

.box .list {
  position: relative;
  display: flex;
  padding: 10px;
  border-radius: 10px;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
  overflow: hidden;
  background: #fff;
}

实现上述样式后，我们只能看到大致的列表样式，因为图片尺寸大小和字体我们还没有设置。

优化用户信息卡片样式

.box .list .imgBx {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: #efefef;
  margin-right: 10px;
}

.box .list .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box .list .content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #333;
}

.box .list .content .rank {
  position: absolute;
  right: -50px;
  color: #03a9f4;
  transition: 0.5s;
  font-size: 2em;
}

.box .list .content .rank small {
  font-weight: 500;
  opacity: 0.25;
}

实现上述系统后可以看到如下的页面布局。

实现鼠标悬停某个用户卡片后，突出显示用户信息的效果

为了增强交互效果，可以为 .box .list 设置超出隐藏属性，因为 rank 元素采用绝对定位布局，我们把 .box .list 设置为隐藏后就会看不到编号，这样我们就可以使用:hover和right来实现进场动画。

/* 超出隐藏元素 */
.box .list {
  overflow: hidden;
}

/* 所有用户信息卡片添加毛玻璃效果 */
.box:hover .list {
  filter: blur(5px);
  opacity: 0.25;
}

/* 当前鼠标悬停的用户信息卡片添加对应的放大样式和去除毛玻璃效果 */
.box .list:hover {
  box-shadow: -10px 20px 35px rgba(0, 0, 0, 0.15);
  filter: blur(0);
  opacity: 1;
  transform: scale(1.15);
}

实现上述效果后，具体的悬停效果如下：

/* 实现数字进程动画 */
.box .list:hover .content .rank {
  right: 20px;
}

.box .list:hover .content h4 {
  line-height: 1.2em;
  font-weight: 600;
}

.box .list:hover .content p {
  font-size: 0.75em;
}

实现上述代码后就可以完成所有效果。

完整代码下载

完整代码下载