css制作指针

使用CSS自定义鼠标指针

通过CSS的cursor属性可以自定义鼠标指针样式。以下是几种常见方法：

基础指针样式

.element {
  cursor: pointer; /* 手型指针 */
  cursor: help;    /* 帮助问号 */
  cursor: wait;    /* 等待圆圈 */
  cursor: crosshair; /* 十字准星 */
}

使用图片作为指针

.element {
  cursor: url('custom-cursor.png'), auto;
  /* 可指定热点位置 */
  cursor: url('custom-cursor.cur') 16 16, pointer;
}

动画指针实现

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

.custom-cursor {
  width: 32px;
  height: 32px;
  background-color: rgba(255,0,0,0.5);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: pulse 1s infinite;
}

JavaScript配合实现

document.addEventListener('mousemove', (e) => {
  const cursor = document.querySelector('.custom-cursor');
  cursor.style.left = `${e.pageX}px`;
  cursor.style.top = `${e.pageY}px`;
});

注意事项

• 图片格式支持：.cur、.png、.jpg等
• 建议始终提供备用指针类型
• 自定义指针尺寸不要超过128x128像素
• 移动端设备可能不支持自定义指针

通过组合这些技术可以创建各种创意指针效果，包括动态效果、主题指针等。