在网站上创建逼真的烟花效果(动画)

问题描述 投票:0回答:1

我需要在网站上的[[white背景上创建逼真的烟花效果(以页面标题为标题的整页背景,文字渐渐消失,烟花在中途出现,最后,一个神奇的拱形灰尘将飞过标题中间的标题,然后重定向到登录页面disney fireworks的原始演示-假定视频被包裹在其中一个codepen标记),但我不知道是否可以仅使用HTML,CSS和JS或任何类型的框架或库来重新创建此级别的动画(任何建议都很棒)。

我可以想到的解决方案之一是使用某些视频效果软件(例如AfterEffects)创建视频并将其放在标题的背景下,这里的主要问题是在短期内学习该软件的时间成本但是这样做的问题之一是布局不会像以前那样具有响应性,并且可能无法使用HTML元素正确缩放。因此,我想我还需要在视频本身中创建动画和字体,以便它们可以与烟花和拱门尘埃一起适当缩放?

[有一些烟花效果的示例代码,但它们不够逼真或在白色背景下效果不佳,例如<video/>

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

css reactjs animation particles fireworks
1个回答
0
投票
您可以在Firework jsFiddle处使用后效果创建效果并导出为JSON,然后Lottie可以控制该动画。

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

© www.soinside.com 2019 - 2024. All rights reserved.