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

Question

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

这是该gif的截图

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

它有一些问题，例如，当我单击动画时触发该动画，但是动画跟随鼠标而不是停留在单击坐标中，它缺少很多东西，例如那些散布在点击区域的闪亮粒子和模糊的光晕，我不知道该怎么做，有人知道我该怎么做？例如，我应该学习或寻找什么才能得到想要的东西？我缺乏专业知识，因此我真的希望获得一些指导或任何东西

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

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>