以下是一个基于JavaScript实现的网页飘雪特效：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页飘雪特效</title>
<style>
#snowflake {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
</style>
</head>
<body>
<div id="snowflake"></div>
<script>
// 创建雪花元素
function createSnowflake() {
const snowflake = document.createElement("div");
snowflake.innerHTML = "❄️";
snowflake.style.fontSize = Math.random() * 50 + "px";
snowflake.style.opacity = Math.random();
snowflake.style.color = "#fff";
snowflake.style.position = "absolute";
snowflake.style.top = "-50px";
snowflake.style.left = Math.random() * window.innerWidth + "px";
return snowflake;
}
// 雪花下落动画
function snowfall(snowflake) {
const duration = Math.random() * 10 + 5;
const delay = Math.random() * 5;
TweenMax.to(snowflake, duration, {
top: window.innerHeight + snowflake.offsetHeight,
rotation: Math.random() * 360,
ease: Power0.easeNone,
delay: delay,
onComplete: function() {
snowflake.parentNode.removeChild(snowflake);
}
});
}
// 初始化雪花
function initSnowflake() {
const snowflakeContainer = document.getElementById("snowflake");
const snowflakeNum = 50;
for (let i = 0; i < snowflakeNum; i++) {
const snowflake = createSnowflake();
snowflakeContainer.appendChild(snowflake);
snowfall(snowflake);
}
}
// 页面加载完成后初始化雪花
window.onload = function() {
initSnowflake();
};
</script>
</body>
</html>代码中，首先创建了一个空的<div>元素作为雪花容器，并为其设置了绝对定位、宽度和高度等样式。接着定义了一个createSnowflake()函数，用于创建单个雪花元素，该函数设置了雪花的HTML内容、字体大小、透明度、颜色、位置等样式，并返回雪花元素。然后定义了一个snowfall()函数，用于实现雪花的下落动画，该函数使用了TweenMax库实现了雪花的运动轨迹、旋转角度、运动时间等效果。最后，在页面加载完成后，调用initSnowflake()函数初始化雪花，该函数通过循环调用createSnowflake()函数和snowfall()函数实现了多个雪花的飘落效果。
需要注意的是，该特效使用了TweenMax库，需要在代码中引入该库的CDN或本地文件。另外，也可以根据需求调整雪花数量、运动轨迹、旋转角度等参数，实现不同的效果。
原创文章，作者：草根站长，如若转载，请注明出处：https://www.jianzhanben.com/jishu/767.html
