使用图片或者svg自定义鼠标指针

为什么要自定义鼠标指针？

传统的鼠标指针通常是一个箭头或手型，这在大多数情况下是足够的。但在特定的场景下，一个自定义的鼠标指针可以更好地补充网页的主题和设计风格。它可以为网站增色添彩，增加品牌识别度，以及提供更好的交互反馈。例如，当鼠标悬停在重要按钮上时，一个具有创意的指针图标可以吸引用户的注意并增加点击的欲望。

使用CSS样式自定义鼠标指针

在HTML和CSS中，我们可以使用cursor属性来自定义鼠标指针。这个属性允许我们设置鼠标指针的样式，包括使用自定义的图片或SVG。

.custom-cursor { 
    cursor: url('path/to/custom-cursor.png'), auto; 
}

在上述代码中，我们通过url()函数引用了一个自定义的图片文件custom-cursor.png作为鼠标指针。你可以根据自己的需求使用不同的图片，并调整样式以实现独特的指针效果。

同时url后也可以自定义图片的位置，例如

.custom-cursor { 
    cursor: url('path/to/custom-cursor.png') 6 6, auto; 
}

假如图片是12*12的大小，那么这时图片会出现在指针的正中央。

使用SVG绘制自定义指针

除了使用图片，我们还可以使用纯CSS或JavaScript来绘制自定义的SVG指针。这样可以更灵活地控制指针的样式和交互效果。

<template>
  <div class="custom-cursor" :style="customCursorStyle">
    <!-- Your content here -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      pointSize：12
    }
  },
  computed: {
    customCursorStyle() {
      // 使用计算属性将SVG代码转换为数据URI，并作为cursor样式
      const svgCode = this.templateSVG();
      const dataURI = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgCode);
      return {
        cursor: `url(${dataURI}) ${this.pointSize / 2} ${this.pointSize / 2}, auto`
      };
    }
  },
  methods: {
    templateSVG() {
      // 使用模板字符串和变量生成SVG代码
      return `
          <svg 
            xmlns="http://www.w3.org/2000/svg" 
            width="${this.pointSize}" 
            height="${this.pointSize}"
          >
            <circle 
              cx="${this.pointSize / 2}" 
              cy="${this.pointSize / 2}" 
              r="${this.pointSize / 2}" 
              fill="yellow"
            />
          </svg>
        `;
    },
  },
};
</script>

<style lang="scss" scoped>
// ...
</style>

在这个示例中，我们使用Vue.js来更新自定义指针的位置，并在CSS中使用cursor中url后的定位属性将指针的中心点与鼠标指针的位置对齐。这样，无论鼠标在屏幕的什么位置，指针都会显示在鼠标指针的正中间。

假如children是图片的话，就会实现这样的效果

悬浮在图片上的图标变成了小圆点。

结语

自定义鼠标指针是一个简单但强大的工具，可以为网页增添创意和个性化体验。无论是使用图片、SVG，还是纯CSS绘制，自定义鼠标指针都可以根据网站的主题和设计风格来实现。但请注意，自定义指针的大小和样式应该适度，避免影响用户体验。