直播视频网站源码用css 快速实现烟花绽放的相关代码
一、单个烟花的实现
这里我们可以采取序列帧的方式来实现。比如我会要求设计师导出一组序列帧图片
CSS 实现为
二、随机位置的烟花
现在烟花每次出现的位置都是相同的,太有规律显得不那么自然,那么如何实现一会在这里一会在那里的效果呢?这里可以再添加一个关键帧,随便改几个位置(不一定需要真的随机,只需要看着不那么规律即可)
然后把两个动画组合起来
三、随机大小的烟花
随机位置有了,现在再加点大小变化,只需要在位置变化的基础上加上 scale 就可以了
四、多个烟花随机绽放
单个烟花始终还是有些单调,现在多加几个,由于现在单个烟花会出现 4 个不同的位置,所以并不需要太多的 HTML 结构,每个给一个不同的位置
以上就是直播视频网站源码用CSS 快速实现烟花绽放的相关代码, 更多内容欢迎关注之后的文章
- 海报