写一个飘雪花的html代码
时间: 2024-05-19 13:16:03 浏览: 7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>飘雪花</title>
<style>
body {
background-color: #000;
}
.snowflake {
position: fixed;
top: -10px;
z-index: 9999;
user-select: none;
pointer-events: none;
animation: snow 10s linear infinite;
}
.snowflake:before {
content: "\2744";
color: #fff;
text-shadow: 0 0 5px #000;
font-size: 20px;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
@keyframes snow {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(1000px) rotate(360deg);
}
}
</style>
</head>
<body>
<script>
for (var i = 0; i < 50; i++) {
var snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.style.left = Math.random() * window.innerWidth + "px";
snowflake.style.animationDelay = Math.random() * 10 + "s";
document.body.appendChild(snowflake);
}
</script>
</body>
</html>