两种雪花的动态效果代码，分别使用HTML/CSS和JavaScript实现
以下是使用HTML和CSS实现的雪花静态效果代码，以及使用JavaScript实现动态雪花效果的代码。
HTML/CSS 静态雪花效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowflakes</title>
<style>
.snowflake {
position: absolute;
color: white;
user-select: none;
z-index: 1000;
}
</style>
</head>
<body>
<div class="snowflake">❄</div>
</body>
</html>JavaScript 动态雪花效果:
// 动态雪花效果
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.textContent = '❄';
snowflake.classList.add('snowflake');
// 随机位置
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.top = '-50px'; // 初始位置在屏幕上方
document.body.appendChild(snowflake);
// 下落动画
snowflake.animate(
[
{ top: '-50px' }, // 开始状态
{ top: `${window.innerHeight}px`} // 结束状态
],
{
duration: 5000 + Math.random() * 5000, // 随机下落时间
easing: 'cubic-bezier(0.5, -0.5, 1, 1)', // 缓动函数
fill: 'forwards' // 在动画结束时保持最后一帧状态
}
);
// 动画完成后从DOM中移除
snowflake.onfinish = () => snowflake.remove();
}
// 创建初始雪花
createSnowflake();
// 定时创建新雪花
setInterval(createSnowflake, 500);这段JavaScript代码会在页面中定期创建新的雪花div，并给它们应用一个随机的下落动画。动画完成后，雪花会被从DOM中移除。
评论已关闭