javascript - 具有不透明度和粒子的 CSS 单击动画

Question

我想为我的网站制作自定义点击动画，我想做这样的事情:

这是一张动图截图

我的第一个方法是这样的:

它有一些问题，例如当我点击时动画被触发但动画跟随鼠标而不是停留在点击坐标中，它缺少很多东西，比如那些散布在点击区域的 Shiny 粒子和那个模糊的光晕，我不知道该怎么做，有人知道我应该怎么做才能做到这一点？比如，我应该学习或搜索什么才能得到我想要的东西？我缺乏专业知识，所以我真的很想要一些小指导或任何东西

我不知道这是否有一点帮助，但我仍然会粘贴我的第一种方法的代码

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;");
})

document.addEventListener('click', () => {
  cursor.classList.add("expand");

  setTimeout(() => {
    cursor.classList.remove("expand");
  }, 500);
})

body {
  margin: 0;
  height: 100vh;
  background-color: black;
}

.cursor {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
}

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

.expand {
  animation: cursorAnim3 .3s forwards;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

<div class="cursor"></div>

欢迎任何建议:c

Answer 1

我在您的代码中添加的是 mousemove 事件中的 if 语句。我不知道如何解释，我只是添加了它并且它有效......希望这就是你想要的! :) PS:我还添加了 overflow-x: hidden 和 overflow-y: hidden 因为主体尺寸在增加。它位于

body {

}

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
  if (cursor.classList.length === 1) {
    cursor.setAttribute("style", "top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;");
  }
})

document.addEventListener('click', () => {
  cursor.classList.add("expand");

  setTimeout(() => {
    cursor.classList.remove("expand");
  }, 500);
})

body {
  margin: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: black;
}

.cursor {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
}

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

.expand {
  animation: cursorAnim3 .3s forwards;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

<div class="cursor"></div>