如何使用 CSS、JS 和 HTML 通过 2 个步骤制作鼠标波纹点击效果🖱️⚪

🔍 概述

第一：JavaScript

第二：CSS

✔️ 结束

🔍 概述

所以今天您将使用 HTML5、CSS3 和 JavaScript 构建鼠标光标的酷炫波纹效果。

🎯 让我们想一想：这到底是怎么回事？ 确实，无论用户点击页面的哪个位置，都会弹出一种波浪效果。

• 因此，我们使用 JS 来检查用户是否点击了，如果是，则创建波浪；
• 这种波浪的位置必须在光标点击的点上；
• 接下来CSS负责制作动画，并设置样式，这样我们就可以看到效果了；
• 此外，当动画结束时，波浪就会从视口中消失；

它基本上使用了一种简单的逻辑，所以让我们开始吧，我会尽可能多地解释。

第一：JavaScript

document.onclick = () => applyCursorRippleEffect(event); 

function applyCursorRippleEffect(e) {
   const ripple = document.createElement("div");

   ripple.className = "ripple";
   document.body.appendChild(ripple);

  ripple.style.left = `${e.clientX}px`;
  ripple.style.top = `${e.clientY}px`; 

   ripple.style.animation = "ripple-effect .4s  linear";
   ripple.onanimationend = () => document.body.removeChild(ripple);

}

• 如果用户点击了视口中的任意位置，则调用回调函数applyCursorRippleEffect(event)，作为event携带信息的对象onclick；

• 我们声明applyCursorRippleEffect(event)，其中ripple将其创建为 div 元素，接收ripple其类以便 CSS 更好地访问它，最后将其放入屏幕；

• 现在，我们得到了一些内容，但还没有效果。涟漪效果必须位于鼠标光标所在的位置。为此，e.clientX和e.clientY会给我们一个数字来定位光标。它们是 的属性event。有了这些信息，我们就可以正确地说出元素的left和。记住在这些数字后面添加；topripplepx

• 接下来，让我们应用 来ripple-effect为 赋予魔力ripple element，作为我们很快用 CSS 构建的动画；

• 最后，onanimationend告诉ripple元素在动画结束后将做什么，在本例中，从屏幕上消失document.body.removeChild(ripple);；

第二：CSS

.ripple {
   width: 10px;
   height: 10px;
   background-color: transparent;
   position: fixed;
   border-radius: 50%;
   border: 1px solid $ffffff59;
}

@keyframes ripple-effect {
   to {
      transform:scale(15);
      opacity: 0.01;
   }
}

• 现在，文件中.css带有 class 的元素ripple已设置好样式。宽度和高度的初始设置是15px因为我们很快就会添加这个功能，所以涟漪一开始很小，最后很大。position: fixed;需要将元素固定在脚本所需的位置。尽管如此，创造力仍然无限。

• 总结一下，我们创建ripple-effect关键帧来表达动画的内容。transform: scale(15)表示ripple会按需要增加。你也可以直接增加宽度和高度，但这不利于动画性能，所以这里我使用了变换。最后，opacity随着尺寸的增加，会产生涟漪效果。

• 请记住，您可以进行很多非常酷的组合，改变波纹的形状、颜色等等......

✔️ 结束

感谢您的来访，希望您觉得有趣或学到了新东西。再见👋