如何移除自定义光标（custom cursor）的easing缓动效果

移除光标缓动效果方案 #

你代码里的光标移动缓动效果完全由CSS的transition属性控制，仅需修改#custom-cursor的transition配置即可，无需改动JS和HTML代码。

修改说明 #

原CSS中#custom-cursor的transition配置包含了transform ease-out 0.15s，这就是控制光标移动缓动的规则：

• 若要保留hover时边框、透明度、背景色的过渡效果，只需要删除transition中transform相关的配置即可
• 若要完全移除所有过渡效果，直接删除整行transition配置即可

完整修改后代码 #

CSS代码

* {
  cursor: none;
}

.custom-cursor-moved,
.custom-cursor-moved * {
  cursor: none !important;
}

#custom-cursor {
  display: none;
  position: fixed;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  /* 已移除transform对应的过渡规则，仅保留其他属性的过渡效果 */
  transition: border 0.5s, opacity 0.5s, background-color 0.5s;
}

#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

JS代码（无需修改）

let cursor = document.querySelector('#custom-cursor');

document.addEventListener('mousemove', evt => {
  document.body.classList.add('custom-cursor-moved')

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
    $('#custom-cursor').remove();
  } else {
    cursor.style.display = 'block';
  }


  let {
    clientX: x,
    clientY: y
  } = evt;
  let scale = 1;

  if (evt.target.matches('a,span,[onclick],img,video,i')) {
    cursor.classList.add('active');
    scale = 0.5;
  } else {
    cursor.classList.remove('active');
  }

  cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

});

HTML代码（无需修改）

<div id="custom-cursor"></div>
<span>HOVER OVER ME</span>

内容的提问来源于stack exchange，提问作者gjjr