两种雪花的动态效果代码，分别使用HTML/CSS和JavaScript实现

elirlove1

于 2023-12-18 09:44:16 发布

阅读量1.1k

点赞数 22

文章标签： html css javascript

本文链接：https://blog.csdn.net/elirlove1/article/details/135055455

版权

html复制代码

	`<!DOCTYPE html>`
	`<html>`
	`<head>`
	`<style>`
	`.snowflake {`
	`position: absolute;`
	`top: 0;`
	`background: white;`
	`height: 5px;`
	`width: 5px;`
	`border-radius: 50%;`
	`opacity: 0.7;`
	`filter: blur(2px);`
	`animation: fall linear infinite;`
	`}`

	`@keyframes fall {`
	`to {`
	`transform: translateY(100vh);`
	`}`
	`}`
	`</style>`
	`</head>`
	`<body>`
	`<div id="snowflakes"></div>`

	`<script>`
	`const snowflakesContainer = document.getElementById('snowflakes');`
	`const numberOfSnowflakes = 100;`

	`for (let i = 0; i < numberOfSnowflakes; i++) {`
	`const snowflake = document.createElement('div');`
	`snowflake.classList.add('snowflake');`
	snowflake.style.left = `${Math.random() * 100}vw`;
	snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`;
	snowflake.style.animationDelay = `${Math.random() * 5}s`;
	`snowflakesContainer.appendChild(snowflake);`
	`}`
	`</script>`
	`</body>`
	`</html>`

这段代码会在页面上生成100个雪花，每个雪花都会沿着屏幕垂直方向下落。雪花的初始位置、下落速度和延迟时间都是随机的，以创建更自然的效果。你可以根据需要调整雪花的数量、大小和下落速度。

html复制代码

	`<!DOCTYPE html>`
	`<html>`
	`<head>`
	`<style>`
	`canvas {`
	`position: absolute;`
	`top: 0;`
	`left: 0;`
	`}`
	`</style>`
	`</head>`
	`<body>`
	`<canvas id="snowCanvas"></canvas>`

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

	`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() * 1 + 0.5;`
	`}`

	`update() {`
	`this.y += this.speed;`
	`if (this.y > canvas.height) {`
	`this.y = 0;`
	`}`
	`}`

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

	`function init() {`
	`canvas.width = window.innerWidth;`
	`canvas.height = window.innerHeight;`
	`for (let i = 0; i < numberOfSnowflakes; i++) {`
	`snowflakes.push(new Snowflake());`
	`}`
	`animate();`
	`}`

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

	`init();`
	`</script>`
	`</body>`
	`</html>`

关注