关于前端:JavaScriptCSS实现鼠标跟随繁花效果

https://www.bilibili.com/vide…

JavaScript and CSS animation showing flowers following the mouse pointer.

这个成果的灵感来自某些网站，当鼠标挪动时，鼠标箭头四周呈现气泡、红心或水波的扩散图案，这种成果对网页的访问者有很强的视觉吸引力

咱们用原生的 HTML，JavaScript 和 CSS 就能实现这种成果

思路如下：

咱们监听mousemove事件，当事件触发时，创立一些 div，花朵，红心和气泡作为div的背景图片。并将他们的地位设置为鼠标指针的地位，而后应用settimeout在几秒钟之后将其删除后：

document.addEventListener("mousemove", function (e) {
  let body = document.querySelector("body");
  let flower = document.createElement("div");
  let x = e.offsetX;
  let y = e.offsetY;
  flower.style.left = x + "px";
  flower.style.top = y + "px";
  body.appendChild(flower);
  setTimeout(function () {
    flower.remove();
  }, 2000);
});

为了使这些花儿出现动静和随机的视觉效果，咱们应用 Math.random() 为每朵花儿设置了随机尺寸和随机旋转角度（ Math.random() 在实现相似的成果时总是十分有用）。

let size = Math.random() * 80;
flower.style.width = 20 + size + "px";
flower.style.height = 20 + size + "px";

let rotation = Math.random() * 360;
flower.style.transform = `rotate(${rotation}deg)`;

以上就是 JavaScript 的局部了, 咱们次要用 JS 进行元素的创立和初始状态的设定。

动画成果的局部应用 CSS 就能做到。总共要实现 3 个动画成果：

1. 花儿创立之后淡入
2. 花儿被移除之前淡出
3. 花儿的挪动扩散和旋转

淡入淡出通过设置几个节点的 opacity实现：

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
}

挪动扩散和旋转用 transform 实现即可：

@keyframes move {
  0% {
    transform: translate(0) rotate(0deg);
  }
  100% {
    transform: translate(300px) rotate(360deg);
  }
}

这两个 keyframes 设置一样的时常、工夫函数都用 linear，反复次数都设置为 infinite:

div {
  animation: fadeInOutc 2s linear infinite;
}

div:before {
  animation: move 2s linear infinite;
}

最初，还有一个小成果值得一提，即当两片花儿重叠的时候，下面的花要在上面的花上投入一个暗影，这样会显得更真切，这个成果能够用 drop-shadow 实现。

filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));

心愿大家喜爱这个成果！

最初附上：

Demo：https://codesteppe.github.io/…

源码：https://github.com/CodeSteppe…