要使用 snowfall.jquery.js 实现满屏飘落爱心动画效果,你可以简单地自定义雪花元素为 ❤️ 或爱心图片,从而实现浪漫效果,适合用于情人节、表白页、婚礼网站等页面。


✅ 1. 准备资源

💾 引入 snowfall.jquery.js

你可以用以下方式引入该插件:

📦 下载地址(GitHub 项目):

https://github.com/loktar00/JQuery-Snowfall

📌 或用 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 组件

需要哪个,告诉我即可,我马上为你生成。