下落蛋糕粒子效果库 - 创建优雅的漂浮粒子动画
- 导入HTML页面即用
- 流畅的 CSS 动画
- 内置多种参数可供自定义
- 零依赖（纯 JavaScript）
<script src="https://unpkg.com/fall-cake/dist/fall-cake.min.js"></script>或使用 jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/fall-cake/dist/fall-cake.min.js"></script>npm install fall-cakeconst FallCake = require('fall-cake');<!DOCTYPE html>
<html>
<head>
<title>My Birthday Page</title>
<style>
body {
margin: 0;
background: #050510;
min-height: 100vh;
}
</style>
</head>
<body>
<!-- 页面内容 -->
<h1>Happy Birthday!</h1>
<!-- 引入 Fall Cake -->
<script src="https://unpkg.com/fall-cake/dist/fall-cake.min.js"></script>
<script>
// 创建漂浮粒子效果
const fallCake = new FallCake(document.body);
</script>
</body>
</html>| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
particleCount |
number | 18 |
初始粒子数量 |
particleInterval |
number | 850 |
粒子生成间隔（毫秒） |
particleLifespan |
number | 22000 |
粒子存活时间（毫秒） |
const fallCake = new FallCake(document.body);const fallCake = new FallCake(document.body, {
particleCount: 30, // 更多粒子
particleInterval: 500, // 更快的生成速度
particleLifespan: 30000 // 更长的存活时间
});window.addEventListener('load', () => {
const fallCake = new FallCake(document.body);
});停止生成新的粒子。
const fallCake = new FallCake(document.body);
// 5秒后停止生成粒子
setTimeout(() => {
fallCake.stop();
}, 5000);重新开始生成粒子。
const fallCake = new FallCake(document.body);
fallCake.stop();
fallCake.restart();销毁实例，完全移除粒子层。
const fallCake = new FallCake(document.body);
// 页面切换时销毁
fallCake.destroy();粒子会：
- 从屏幕顶部以随机位置生成
- 缓慢下落同时旋转
- 带有随机大小（24px - 114px）
- 带有随机透明度（0.08 - 0.26）
- 持续循环生成
# 克隆仓库
git clone https://github.com/VignaChu/fall-cake.git
cd fall-cake
# 安装依赖
npm install
# 查看示例
npm run demoMIT License - 详见 LICENSE 文件