html满屏飘雪花代码
时间: 2023-11-29 19:46:16 浏览: 87
以下是一个简单的HTML满屏飘雪花代码的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snowflakes</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.snowflake {
position: absolute;
font-size: 2em;
color: #fff;
user-select: none;
-webkit-user-select: none;
z-index: 9999;
pointer-events: none;
}
</style>
</head>
<body>
<script>
// 创建一个雪花元素
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.innerHTML = '❄';
snowflake.classList.add('snowflake');
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
snowflake.style.opacity = Math.random();
document.body.appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 5000);
}
// 创建多个雪花元素
setInterval(() => {
createSnowflake();
}, 50);
</script>
</body>
</html>
```