jQuery下雪特效

ziblog

已于 2025-06-27 15:26:47 修改

阅读量374

点赞数 3

CC 4.0 BY-SA版权

文章标签：特效

于 2025-04-30 15:02:48 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147633177

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery下雪特效</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
}
.snowflake {
position: absolute;
color: white;
font-size: 20px;
pointer-events: auto;
cursor: pointer;
user-select: none;
text-shadow: 0 0 5px #fff;
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
// 创建雪花
function createSnowflake() {
const snowflake = $('<div class="snowflake">❄</div>');

// 随机位置
const startX = Math.random() * $(window).width();
const startY = -20;

// 随机大小
const size = Math.random() * 15 + 10;

// 随机动画持续时间
const duration = Math.random() * 10 + 5;

// 随机透明度
const opacity = Math.random() * 0.7 + 0.3;

// 应用样式
snowflake.css({
left: startX + 'px',
top: startY + 'px',
fontSize: size + 'px',
opacity: opacity,
animationDuration: duration + 's'
});



$('body').append(snowflake);

// 动画结束后移除雪花
setTimeout(function() {
snowflake.remove();
}, duration * 1000);
}

// 定期创建雪花
setInterval(createSnowflake, 200);
});
</script>
</body>
</html>