js飘雪特效

牡丹君

复制到网页中即可食用，无需样式和id，真实自然，不卡顿，放心食用。放在via浏览器脚本里可以实现本地所有网页飘雪效果。（去掉script标签）

1. <script>
   
2. //飘雪特效右上角往左无需样式
   
3. (function() {
   
4.     var existing = document.getElementById('snow_canvas_overlay');
   
5.     if (existing) existing.remove();
   
6. 
   
7.     var canvas = document.createElement("canvas");
   
8.     var ctx = canvas.getContext("2d");
   
9.     var width = window.innerWidth;
   
10.     var height = window.innerHeight;
    
11.     var flakes = [];
    
12.     var flakeCount = 250;
    
13. 
    
14.     canvas.id = "snow_canvas_overlay";
    
15.     canvas.style.cssText = "position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;pointer-events:none;";
    
16.     document.body.appendChild(canvas);
    
17. 
    
18.     function resize() {
    
19.         width = window.innerWidth;
    
20.         height = window.innerHeight;
    
21.         canvas.width = width;
    
22.         canvas.height = height;
    
23.     }
    
24.     window.addEventListener("resize", resize);
    
25.     resize();
    
26. 
    
27.     function createFlake(initial) {
    
28.         var r = Math.random() * 3 + 1;
    
29.         var x, y;
    
30.         
    
31.         if (initial) {
    
32.             x = Math.random() * width;
    
33.             y = Math.random() * height;
    
34.         } else {
    
35.             if (Math.random() > 0.5) {
    
36.                 x = Math.random() * width + (width * 0.2);
    
37.                 y = -10;
    
38.             } else {
    
39.                 x = width + 10;
    
40.                 y = Math.random() * height;
    
41.             }
    
42.         }
    
43. 
    
44.         return {
    
45.             x: x,
    
46.             y: y,
    
47.             r: r,
    
48.             speed: r * 0.4 + Math.random() * 0.6,
    
49.             wind: r * 0.3 + 0.5,
    
50.             swing: Math.random() * Math.PI * 2,
    
51.             swingSpeed: 0.02 + Math.random() * 0.03,
    
52.             opacity: 0.4 + Math.random() * 0.6
    
53.         };
    
54.     }
    
55. 
    
56.     function init() {
    
57.         for (var i = 0; i < flakeCount; i++) {
    
58.             flakes.push(createFlake(true));
    
59.         }
    
60.         loop();
    
61.     }
    
62. 
    
63.     function loop() {
    
64.         ctx.clearRect(0, 0, width, height);
    
65. 
    
66.         for (var i = 0; i < flakeCount; i++) {
    
67.             var f = flakes[i];
    
68. 
    
69.             f.swing += f.swingSpeed;
    
70.             f.y += f.speed;
    
71.             f.x -= f.wind + Math.cos(f.swing) * 0.5;
    
72. 
    
73.             ctx.beginPath();
    
74.             ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
    
75.             ctx.fillStyle = "rgba(255, 255, 255, " + (f.r / 4 * f.opacity) + ")";
    
76.             ctx.fill();
    
77. 
    
78.             if (f.y > height || f.x < -20) {
    
79.                 flakes[i] = createFlake(false);
    
80.             }
    
81.         }
    
82.         requestAnimationFrame(loop);
    
83.     }
    
84. 
    
85.     init();
    
86. })();
    
87. </script>

复制代码

ChromaVortex

感谢楼主热心分享！

hhy0128

感谢分享

风niF

感谢分享

avenir2027

感谢分享

dpin

这个放在哪儿？

练习时长两年半的水怪

dpin 发表于 2025-11-25 16:36
这个放在哪儿？

可以加到油猴脚本末尾

ADD

谢谢分享

wuyinsou

好用，点赞

风niF

腐烂猫

感谢分享

꧁莫♡名꧂

看看