Widget:SnowParticle

<script> document.addEventListener('DOMContentLoaded', function() {

   console.log("======开始初始化雪花效果======");
   
   // 创建样式
   var style = document.createElement('style');
   style.textContent = `
   #particles-js {
       position: fixed;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       z-index: -1;
       pointer-events: none;
   }`;
   document.head.appendChild(style);

   // 创建雪花容器
   if (!document.getElementById('particles-js')) {
       var container = document.createElement('div');
       container.id = 'particles-js';
       document.body.appendChild(container);
   }

   // 动态加载 particles.js
   if (typeof particlesJS === 'undefined') {
       var script = document.createElement('script');
       script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
       script.onload = function() {
           initParticles();
           console.log("======雪花粒子效果已启用======");
       };
       document.head.appendChild(script);
   } else {
       initParticles();
       console.log("======雪花粒子效果已启用======");
   }

});

// 初始化雪花效果 function initParticles() {

   particlesJS("particles-js", {
       particles: {
           number: {
               value: 400,
               density: {
                   enable: true,
                   value_area: 800
               }
           },
           color: {
               value: "#ffffff"
           },
           shape: {
               type: "circle"
           },
           opacity: {
               value: 0.7,
               random: false
           },
           size: {
               value: 3,
               random: true
           },
           line_linked: {
               enable: false
           },
           move: {
               enable: true,
               speed: 2,
               direction: "bottom",
               random: true,
               straight: false,
               out_mode: "out",
               bounce: false
           }
       },
       interactivity: {
           detect_on: "canvas",
           events: {
               onhover: {
                   enable: true,
                   mode: "repulse"
               },
               onclick: {
                   enable: true,
                   mode: "push"
               },
               resize: true
           }
       },
       retina_detect: true
   });

} </script>