雪花代码
动画效果
代码
<!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>
