css3怎么制作鼠标

使用CSS3制作鼠标样式

可以通过CSS的cursor属性自定义鼠标指针样式，结合伪元素或动画实现更复杂效果。

自定义系统预设指针

.element {
  cursor: pointer; /* 手型指针 */
  cursor: help;    /* 问号指针 */
  cursor: zoom-in; /* 放大镜 */
}

使用图片作为指针

.element {
  cursor: url('custom-cursor.png'), auto;
  /* 图片格式支持 .cur/.png/.svg，需指定备用样式(auto) */
}

创建动画指针 通过关键帧动画实现动态效果：

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

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

注意事项

• 图片指针建议尺寸不超过32x32像素
• 使用pointer-events: none避免自定义指针遮挡点击事件
• 移动端浏览器对自定义指针支持有限