雪花html代码

yuwenduo123

已于 2024-01-29 19:23:04 修改

阅读量550

点赞数 13

分类专栏： html 文章标签： html 前端 javascript

于 2024-01-13 09:34:36 首次发布

本文链接：https://blog.csdn.net/yuwenduo123/article/details/135565905

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

下面是代码：

<!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>

运行效果为：