使用canvas-confetti插件版本 1.9.3 创建一个五彩纸屑的特效,具体代码如下:
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script><script>// 页面加载完成即开始执行
window.onload = function() {
var end = Date.now() + (5 * 1000); // 持续时间5秒
(function frame() {
// 发射左侧的纸屑
confetti({
particleCount: 4,
angle: 60,
spread: 80,
origin: { x: 0 },
zIndex: 100,
colors: ["#26ccff","#a25afd","#ff5e7e","#88ff5a","#fcff42","#ffa62d","#ff36ff"],
});
// 发射右侧的纸屑
confetti({
particleCount: 4,
angle: 120,
spread: 80,
origin: { x: 1 },
colors: ["#87CEFA","#FFA500"],
});
if (Date.now() < end) {
requestAnimationFrame(frame); // 循环调用frame函数
}
}());
};</script>