☰

Snowfall Effect

Snowfall animation with wind effect

目前为 2024-11-02 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Snowfall Effect
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Snowfall animation with wind effect
  6. // @match        *://*/*
  7. // @grant        none
  8. // @license MIT
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     const maxSnowflakes = 100;
  15.     let snowflakeCount = 0;
  16.  
  17.     const style = document.createElement("style");
  18.     style.innerHTML = `
  19.         .snowflake {
  20.             position: fixed;
  21.             top: -50px;
  22.             color: #FFF;
  23.             font-size: 10px;
  24.             opacity: 0.8;
  25.             pointer-events: none;
  26.             user-select: none;
  27.             z-index: 9999;
  28.         }
  29.         @keyframes snowfall {
  30.             to {
  31.                 transform: translateX(var(--wind)) translateY(100vh);
  32.             }
  33.         }
  34.     `;
  35.     document.head.appendChild(style);
  36.  
  37.     function createSnowflake() {
  38.         if (snowflakeCount >= maxSnowflakes) return;
  39.         const snowflake = document.createElement("div");
  40.         snowflake.className = "snowflake";
  41.         snowflake.innerHTML = "❄";
  42.         snowflake.style.left = `${Math.random() * 100}vw`;
  43.         snowflake.style.fontSize = `${Math.random() * 10 + 10}px`;
  44.         snowflake.style.animation = `snowfall ${Math.random() * 3 + 5}s linear infinite`;
  45.         snowflake.style.setProperty("--wind", `${Math.random() * 20 - 10}vw`);
  46.         document.body.appendChild(snowflake);
  47.         snowflakeCount++;
  48.  
  49.         snowflake.addEventListener("animationend", () => {
  50.             snowflake.remove();
  51.             snowflakeCount--;
  52.         });
  53.     }
  54.  
  55.     setInterval(createSnowflake, 200);
  56. })();