乐趣区

关于前端: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…

退出移动版