游標美化

Coveduoji發表於2024-11-22

實現效果

image

一、隱藏原來的游標

  • 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>

相關文章