JavaScript、CSS實現滑鼠跟隨繁花效果

CodeSteppe發表於2022-04-25
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...

相關文章