在网站上创建逼真的烟花效果（动画）

Question

我需要在网站上的{strong> white 背景上创建逼真的烟火效果，例如disney fireworks（想象整页背景标题位于页面中央，文本逐渐淡入，烟花在中途出现，最后，一个神奇的拱尘将飞过标题中央，然后重定向到登录页面。 codepen-假设视频被包裹在<video/>标签中），我不知道是否可以仅使用HTML，CSS和JS或任何类型的框架来重新创建这种级别的动画？库（任何建议都会很棒）。

我可以想到的解决方案之一是使用某些视频效果软件（例如AfterEffects）创建视频并将其放在标题的背景中，这里的主要问题是在短时间内学习该软件的时间成本一段时间后，使用视频的另一个问题是布局的响应速度不够快，并且可能无法使用HTML元素正确缩放。因此，我想我还需要在视频本身中创建动画和字体，以便它们可以与烟火和拱门尘埃一起适当缩放？

有一些烟花效果的示例代码，但它们不够逼真或在白色背景下效果不佳，例如Firework jsFiddle。

我想知道你们中的任何人将如何完成这项任务？我真的很感谢任何建议。注意：我还没有在React中实现它。

Answer 1

您可以使用react-lottie在此处创建带有后效的效果并导出为JSON，然后Lottie可以控制该动画。

那将是响应性的，您甚至可以控制帧从许多自定义开始到结束时间。

但是您必须仅使用后效果来创建效果，或者可以搜索fireworks JSON文件并将其组合并创建这样的动画。您可以检查react-springs来组合动画吗？