在网站上创建逼真的烟花效果（动画）
Creating realistic fireworks effect (animation) on website
我需要在 白色 背景上创建逼真的烟花效果，看起来像这样 disney fireworks on a website (imagine a full page background with a title at the center of the page, text is fading in and fireworks appear halfway, lastly a magical arch dust will fly across the title at the center and then redirect to a landing page. Here is the rough demo at codepen - 假设视频被包裹在 <video/> 标签中），我不知道是否可以仅使用 HTML、CSS 和 JS 或任何类型的框架或库来重新创建这种级别的动画（任何推荐都会很棒）。
我能想到的解决方案之一是用一些视频效果软件制作视频，比如 AfterEffects 并将其放在标题的背景中，这里的大问题是学习软件的时间成本短时间和使用视频的另一个问题是布局不会响应，并且它可能无法与 HTML 元素一起正确缩放。所以我想我也需要在视频本身中创建动画和字体，以便它们可以与烟花和拱门灰尘一起适当缩放？
有一些烟花效果的示例代码，但它们不够逼真或不适用于白色背景，例如Firework jsFiddle。
我想知道你们中的任何人将如何完成这项任务？我真的很感激任何建议。注意：我还没有在 React 中实现它。
您可以使用 react-lottie 在那里创建带有后效的效果并导出为 JSON 然后 Lottie 可以控制该动画。
这将是响应式的，您甚至可以控制帧开始结束时间进行大量自定义。
但是您必须仅使用 After Effects 创建效果，或者您可以搜索烟花 JSON 文件并将它们组合起来创建这样的动画。你可以检查 react-springs 组合动画吗？
我需要在 白色 背景上创建逼真的烟花效果，看起来像这样 disney fireworks on a website (imagine a full page background with a title at the center of the page, text is fading in and fireworks appear halfway, lastly a magical arch dust will fly across the title at the center and then redirect to a landing page. Here is the rough demo at codepen - 假设视频被包裹在 <video/> 标签中），我不知道是否可以仅使用 HTML、CSS 和 JS 或任何类型的框架或库来重新创建这种级别的动画（任何推荐都会很棒）。
我能想到的解决方案之一是用一些视频效果软件制作视频，比如 AfterEffects 并将其放在标题的背景中，这里的大问题是学习软件的时间成本短时间和使用视频的另一个问题是布局不会响应，并且它可能无法与 HTML 元素一起正确缩放。所以我想我也需要在视频本身中创建动画和字体，以便它们可以与烟花和拱门灰尘一起适当缩放？
有一些烟花效果的示例代码，但它们不够逼真或不适用于白色背景，例如Firework jsFiddle。
我想知道你们中的任何人将如何完成这项任务？我真的很感激任何建议。注意：我还没有在 React 中实现它。
您可以使用 react-lottie 在那里创建带有后效的效果并导出为 JSON 然后 Lottie 可以控制该动画。
这将是响应式的，您甚至可以控制帧开始结束时间进行大量自定义。
但是您必须仅使用 After Effects 创建效果，或者您可以搜索烟花 JSON 文件并将它们组合起来创建这样的动画。你可以检查 react-springs 组合动画吗？