css如何制作未读图标

使用伪元素和绝对定位

通过CSS伪元素（如::before或::after）结合绝对定位，可以创建一个未读消息的小圆点图标。设置背景色为醒目颜色（如红色），并调整大小和位置。

.unread-icon {
  position: relative;
  display: inline-block;
}

.unread-icon::after {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}

利用边框和阴影增强效果

为未读图标添加边框或阴影可以提升视觉层次感。通过box-shadow属性增加外发光效果，或使用border定义轮廓。

.unread-icon::after {
  box-shadow: 0 0 3px rgba(255, 0, 0, 0.8);
  border: 1px solid white;
}

动态显示控制

通过JavaScript动态添加或移除类名来控制未读图标的显示状态。结合CSS的opacity或display属性实现平滑过渡。

document.querySelector('.notification').classList.add('unread-icon');

动画效果增强交互

添加脉冲动画效果使未读图标更引人注目。使用@keyframes定义动画，并通过animation属性应用。

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.unread-icon::after {
  animation: pulse 1.5s infinite;
}

响应式尺寸调整

使用相对单位（如em或vw）确保未读图标在不同屏幕尺寸下保持比例。结合媒体查询优化移动端显示。

.unread-icon::after {
  width: 0.8em;
  height: 0.8em;
}

结合字体图标

若项目已引入字体图标库（如Font Awesome），可直接使用其提供的未读标记类名，减少自定义CSS代码。

<i class="fas fa-circle notification-badge"></i>