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

发布时间:2023年12月18日
  1. 使用HTML/CSS实现雪花动态效果

 

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个雪花,每个雪花都会沿着屏幕垂直方向下落。雪花的初始位置、下落速度和延迟时间都是随机的,以创建更自然的效果。你可以根据需要调整雪花的数量、大小和下落速度。

  1. 使用JavaScript实现雪花动态效果(使用canvas)

 

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>
文章来源:https://blog.csdn.net/elirlove1/article/details/135055455
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。