要使用 snowfall.jquery.js
实现满屏飘落爱心动画效果,你可以简单地自定义雪花元素为 ❤️ 或爱心图片,从而实现浪漫效果,适合用于情人节、表白页、婚礼网站等页面。
✅ 1. 准备资源
💾 引入 snowfall.jquery.js
你可以用以下方式引入该插件:
📦 下载地址(GitHub 项目):
📌 或用 CDN(未托管官方 CDN,可手动上传或使用本地 js):
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/snowfall.jquery.js"></script>
✅ 2. 示例代码:爱心满屏飞(文字/图形)
❤️ 爱心字符飘落效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爱心满屏飞</title>
<style>
body {
margin: 0;
padding: 0;
background: #fff0f6;
overflow: hidden;
}
.snowflake {
font-size: 24px;
color: #ff4d4f;
}
</style>
</head>
<body>
<!-- 页面内容 -->
<!-- 引入 jQuery 和 snowfall -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/snowfall.jquery.js"></script>
<script>
// 自定义“雪花”为爱心符号
$(function () {
$(document).snowfall({
image: '', // 不使用图片
flakeCount: 30, // 同时在屏幕上飘落的数量
maxSpeed: 3,
minSpeed: 1,
maxSize: 30,
minSize: 10,
round: true,
shadow: false,
collection: false,
flakeColor: "#ff4d4f", // 红色
content: "❤️" // 使用 Emoji 爱心
});
});
</script>
</body>
</html>
🖼️ 使用爱心图片飘落(更精美)
<script>
$(function () {
$(document).snowfall({
image: 'heart.png', // 你的爱心图片路径,需为透明 PNG
flakeCount: 40,
maxSpeed: 3,
minSpeed: 1,
maxSize: 24,
minSize: 10
});
});
</script>
💡 你可以找一个透明背景的 PNG 爱心图,如:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Love_Heart_symbol.svg/1024px-Love_Heart_symbol.svg.png
✅ 3. snowfall.jquery.js
核心参数说明
参数 | 说明 |
---|---|
flakeCount | 雪花数量(默认 35) |
minSize / maxSize | 雪花大小范围 |
minSpeed / maxSpeed | 飘落速度范围 |
flakeColor | 使用字符作为雪花时的颜色 |
image | 自定义飘落图片路径(优先级高于字符) |
content | 自定义飘落字符,如 "❤️" |
round | 是否为圆形效果 |
collection | 是否在底部堆积(默认 false) |
✅ 4. 效果截图预期
你将看到满屏 ❤️
爱心从顶部慢慢飘落,大小随机,速度不同,类似下雪的浪漫感。
✅ 需要我提供什么?
- ✅ 已打包的
snowfall.jquery.js
和示例文件 ZIP - ✅ 提供一个可在线访问的页面链接
- ✅ 将此效果封装为 Vue / React 组件
需要哪个,告诉我即可,我马上为你生成。
发表回复