光标美化

实现效果

一、隐藏原来的光标

• CSS实现全局隐藏光标：

/* 隐藏默认鼠标光标 */
html,body{
  cursor: none;
}

• 但发现光标悬停在超链接时仍会显示手指光标，所以需要单独设置属性：

/* 隐藏链接的鼠标光标 */
a{
  cursor: none;
}

二、设置两个样式并设置属性

/* 圆形光标1样式 */
.circle-cursor1 {
  /* 固定定位，距离顶部和左侧的位置 */
  position: fixed;
  top: -3px;
  left: -3px;
  /* 宽度和高度，形成圆形 */
  width: 8px;
  height: 8px;
  border-radius: 50%; /* 圆形的边界半径 */
  background-color: rgb(237, 230, 230); /* 背景颜色 */
  pointer-events: none; /* 不响应鼠标事件 */
  z-index: 9999; /* 层级 */
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); /* 居中 */
  cursor: none; /* 隐藏光标 */
}

/* 圆形光标2样式 */
.circle-cursor2 {
  /* 固定定位，距离顶部和左侧的位置 */
  position: fixed;
  top: -8px;
  left: -8px;
  /* 宽度和高度，形成较大的圆形 */
  width: 18px;
  height: 18px;
  border-radius: 50%; /* 圆形的边界半径 */
  background-color: rgba(87, 84, 84, 0.557); /* 背景颜色 */
  pointer-events: none; /* 不响应鼠标事件 */
  z-index: 9998; /* 层级 */
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); /* 居中 */
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; /* 过渡效果 */
  cursor: none; /* 隐藏光标 */
}

三、监听光标位置并让两个圆形光标跟随

document.addEventListener('mousemove', function (e) {
    // 获取圆形光标1的元素
    var cursor1 = document.querySelector('.circle-cursor1');
    // 获取圆形光标2的元素
    var cursor2 = document.querySelector('.circle-cursor2');

    // 更新圆形光标1和光标2的位置，以鼠标的坐标为基准
    cursor1.style.transform = cursor2.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});

四、html页面创建两个元素

<div class="circle-cursor1"></div>
<div class="circle-cursor2"></div>