雪花代码-html版

雪花代码

动画效果

代码

javascript 复制代码
<!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>
相关推荐
rzl027 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang8 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景10 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼11 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿13 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再15 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55519 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录24 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000025 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl26 分钟前
深度剖析Kafka读写机制
前端