雪花代码-html版_html雪花特效代码

作者：繁依Fanyi0 | 2024-04-10 02:48:38

踩

html雪花特效代码

雪花代码

动画效果

在这里插入图片描述

代码

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #000000;

}

.snowflake {

position: absolute;

font-size: 10px;

color: #FFFFFF;

text-shadow: 1px 1px 1px #000000;

user-select: none;

}

</style>

</head>

<body>

<script>

function random(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

function Snowflake() {

this.characters = "❄️";

this.x = random(0, window.innerWidth);

this.y = random(-200, -100);

this.speed = random(1, 5);

this.element = document.createElement("span");

this.element.classList.add("snowflake");

this.element.innerHTML = this.characters;

document.body.appendChild(this.element);

}

Snowflake.prototype.update = function() {

this.y += this.speed;

this.element.style.top = this.y + "px";

this.element.style.left = this.x + "px";

if (this.y > window.innerHeight) {

this.y = random(-200, -100);

this.x = random(0, window.innerWidth);

}

};

var snowflakes = [];

for (var i = 0; i < 100; i++) {

snowflakes.push(new Snowflake());

}

setInterval(function() {

snowflakes.forEach(function(snowflake) {

snowflake.update();

});

}, 50);

</script>

</body>

</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/396199