网络日志

JavaScript、CSS实现鼠标跟随繁花效果

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