通知卡片（未读红点 + 全部已读列表 CSS 源码）

效果演示（真实可交互）

下方为通知卡片：三条未读通知右侧带渐变蓝点，点击任意一条即可标记已读；鼠标悬停单条时出现关闭按钮，点击后通知向右滑出消失；右上角”全部标为已读”按钮让徽章计数归零并消失；全部关闭后展示空状态。

完整代码

HTML 结构：卡片由头部（标题 + 未读徽章 + 全部已读按钮）与列表组成，每条通知包含图标、正文、时间与关闭按钮：

<div class="nc-card">
  <div class="nc-head">
    <h3>通知 <span class="nc-badge">3</span></h3>
    <button class="nc-mark">全部标为已读</button>
  </div>
  <ul class="nc-list">
    <li class="nc-item unread">
      <span class="nc-ico">💬</span>
      <div class="nc-body">
        <p class="nc-text"><b>鱼崽</b> 评论了你的组件</p>
        <time>2 分钟前</time>
      </div>
      <button class="nc-x">✕</button>
    </li>
  </ul>
  <div class="nc-empty" hidden>🔔 暂无通知</div>
</div>

核心 CSS：未读标记用伪元素实现右上角渐变圆点，关闭动画为透明度 + 右移，之后才移除节点：

.nc-item.unread::before {
  content: ""; position: absolute; right: 16px; top: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #6c8cff, #a96cff);
}
.nc-item.gone { opacity: 0; transform: translateX(24px); }
.nc-badge.zero { display: none; }

原生 JS 事件委托（无第三方库）：

list.addEventListener('click', e => {
  const item = e.target.closest('.nc-item');
  if (!item) return;
  if (e.target.closest('.nc-x')) {
    item.classList.add('gone');
    setTimeout(() => { item.remove(); refresh(); }, 300);
  } else {
    item.classList.remove('unread');   // 点击任意区域标记已读
    refresh();
  }
});
mark.addEventListener('click', () => {
  list.querySelectorAll('.nc-item.unread')
    .forEach(i => i.classList.remove('unread'));
  refresh();
});

参数说明

兼容性与性能

• 列表点击使用事件委托（一个监听器处理所有条目），通知数量多时性能依然稳定
• 未读圆点用 ::before 伪元素，不增加额外 DOM 节点
• 徽章计数每次仅更新一个文本节点；关闭条目在动画结束后才移除，避免布局抖动
• 纯原生 JS 实现，兼容所有现代浏览器，可与任何前端框架的列表渲染配合

常见问题

Q: 通知数据从接口来怎么接？ 保留 .nc-item 的模板结构，用 JS 循环生成列表并挂到 .nc-list 上，事件委托逻辑无需改动。

Q: 想区分”评论/点赞/系统”三种图标颜色？ 给 .nc-ico 按类型加 .type-comment/.type-like/.type-system 类，分别设置不同背景色即可。

Q: 点击通知要跳转详情页？ 把 .nc-item 内的内容包进 <a>，或在点击处理中根据 data-id 跳转，注意不要让关闭按钮触发跳转（已通过 closest('.nc-x') 分支隔离）。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，替换消息文案与图标即可用于消息中心。