css如何制作未读图标

使用伪元素和绝对定位

通过CSS的::before或::after伪元素创建一个小圆点，结合position: absolute将其定位到目标元素的角落。设置背景色、尺寸和圆角属性即可实现未读提示效果。

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

利用边框和阴影增强效果

通过添加边框和阴影可以让未读图标更醒目。使用box-shadow增加发光效果，border确保图标在不同背景下可见。

.unread-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ff4757;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

动画效果吸引注意力

添加脉冲动画可以让未读状态更明显。使用@keyframes创建缩放动画，并应用到图标元素上。

@keyframes pulse {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.1); }
  100% { transform: scale(0.95); }
}
.unread-notification {
  animation: pulse 1.5s infinite;
}

数字计数器样式

当需要显示未读数量时，可以通过数字标签实现。调整字体大小和颜色确保可读性，使用min-width保持统一外观。

.unread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  background: #3498db;
  color: white;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
}

响应式尺寸调整

使用相对单位确保图标在不同屏幕尺寸下保持合适比例。vw单位基于视口宽度，em基于父元素字体大小。

.responsive-dot {
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.2vw;
}

悬停交互效果

添加悬停状态变化提升用户体验。通过过渡效果平滑改变图标颜色或大小。

.interactive-icon {
  transition: all 0.3s ease;
}
.interactive-icon:hover {
  transform: scale(1.2);
  background: #ff6b81;
}