博客卡片 4 款（分类筛选 + 悬停放大 CSS 源码）

效果演示（真实可交互）

下方为 4 张博客卡片，顶部提供”全部 / CSS / JavaScript / 设计”四个筛选标签，点击后卡片带淡出与缩放过渡完成过滤。悬停卡片时封面的表情图标放大旋转、标题变色、“阅读全文”箭头向右滑动。

完整代码

HTML 结构：每张卡片用 data-cat 标注所属分类，封面区放置一个可放大的表情图标占位，正文包含标签、日期、阅读时长、标题、摘要与阅读链接：

<article class="bc-card" data-cat="css">
  <div class="bc-cover cover-css"><span class="bc-emoji">🎨</span></div>
  <div class="bc-body">
    <div class="bc-meta">
      <span class="bc-tag">CSS</span>
      <time>2026-08-28</time>
      <span class="bc-read">6 分钟</span>
    </div>
    <h3 class="bc-title">用 backdrop-filter 打造毛玻璃导航栏的 5 个细节</h3>
    <p class="bc-excerpt">从模糊半径到内高光，手把手教你调出通透的玻璃质感导航栏。</p>
    <a class="bc-more" href="#">阅读全文 <span class="bc-arrow">→</span></a>
  </div>
</article>

核心 CSS：悬停反馈分三层——封面图标放大旋转、标题变色、箭头位移，全部用 transition 实现：

.bc-emoji { transition: transform .4s ease; }
.bc-card:hover .bc-emoji { transform: scale(1.25) rotate(-6deg); }
.bc-title { transition: color .25s ease; }
.bc-card:hover .bc-title { color: #8fa9ff; }
.bc-arrow { display: inline-block; transition: transform .25s ease; }
.bc-card:hover .bc-arrow { transform: translateX(5px); }

原生 JS 分类筛选（无第三方库）：

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const f = tab.dataset.filter;
    cards.forEach(card => {
      const show = f === 'all' || card.dataset.cat === f;
      if (show) {
        card.classList.remove('hide');
        requestAnimationFrame(() => card.classList.remove('fadeout'));
      } else {
        card.classList.add('fadeout');
        setTimeout(() => card.classList.add('hide'), 280);
      }
    });
  });
});

参数说明

兼容性与性能

• 筛选切换只操作 class，隐藏用 display:none，不会残留不可见节点占用布局
• 所有动效基于 transition + transform，GPU 合成加速，低端设备也能保持流畅
• 网格用 auto-fill + minmax 自适应列数，桌面 4 列、平板 2 列、手机 1 列，无需媒体查询也能自适应
• 双 requestAnimationFrame 确保隐藏卡片先完成过渡再移除，避免闪烁

常见问题

Q: 封面想换成真实图片怎么做？ 将 .bc-cover 内的表情图标替换为 <img>，给图片设置 width:100%; height:100%; object-fit:cover，悬停放大效果即可转移到图片上。

Q: 筛选时卡片会抖动吗？ 不会，淡出卡片在动画结束后才 display:none，其余卡片通过网格自动重排，过渡期间视觉连贯。

Q: 标签和分类是写死的吗？ 数据是演示用假数据，接入真实博客时建议用模板语法循环渲染，data-cat 与 data-filter 保持一致的约定即可。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，替换文案与配图即可用于生产环境。