纯html雪景代码要创建一个漂亮的雪景效果，可以结合 HTML 和 CSS，以及少量的 JavaScript 来实现动态

要创建一个漂亮的雪景效果，可以结合 HTML 和 CSS，以及少量的 JavaScript 来实现动态雪花飘落的效果。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪景</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background-color: #1e1e1e;
            position: relative;
        }

        .snowflake {
            position: absolute;
            top: -10px;
            background: white;
            border-radius: 50%;
            opacity: 0.8;
            pointer-events: none;
            animation: fall linear infinite;
        }

        @keyframes fall {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(100vh);
            }
        }
    </style>
</head>
<body>
    <script>
        const createSnowflake = () => {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            const size = Math.random() * 10 + 5; // 随机大小
            snowflake.style.width = `${size}px`;
            snowflake.style.height = `${size}px`;
            snowflake.style.left = `${Math.random() * 100}vw`; // 随机位置
            snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`; // 随机下落速度
            document.body.appendChild(snowflake);

            // 雪花下落后移除
            snowflake.addEventListener('animationend', () => {
                snowflake.remove();
            });
        }

        // 每隔一定时间生成雪花
        setInterval(createSnowflake, 150);
    </script>
</body>
</html>

这样越来越多时候有点卡顿，可以使用canvas优化一下

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>雪景</title>
		<style>
			body {
				margin: 0;
				height: 100vh;
				overflow: hidden;
				background-color: #1e1e1e;
				position: relative;
			}

			.snowflake {
				position: absolute;
				top: -10px;
				background: white;
				border-radius: 50%;
				opacity: 0.8;
				pointer-events: none;
				animation: fall linear infinite;
			}

			@keyframes fall {
				0% {
					transform: translateY(0);
				}

				100% {
					transform: translateY(100vh);
				}
			}
		</style>
	</head>
	<body>
		<canvas id="snowCanvas"></canvas>

		<script>
			const canvas = document.getElementById('snowCanvas');
			const ctx = canvas.getContext('2d');
			const snowflakes = [];

			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

			class Snowflake {
				constructor() {
					this.x = Math.random() * canvas.width;
					this.y = Math.random() * canvas.height;
					this.size = Math.random() * 5 + 2;
					this.speed = Math.random() * 3 + 1;
				}

				update() {
					this.y += this.speed;
					if (this.y > canvas.height) {
						this.y = 0;
						this.x = Math.random() * canvas.width;
					}
				}

				draw() {
					ctx.fillStyle = 'white';
					ctx.beginPath();
					ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
					ctx.fill();
				}
			}

			for (let i = 0; i < 100; i++) {
				snowflakes.push(new Snowflake());
			}

			function animate() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				snowflakes.forEach(snowflake => {
					snowflake.update();
					snowflake.draw();
				});
				requestAnimationFrame(animate);
			}

			animate();
		</script>

	</body>
</html>