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...