直播视频网站源码用CSS 快速实现烟花绽放

直播视频网站源码用CSS 快速实现烟花绽放的相关代码
一、单个烟花的实现
这里我们可以采取序列帧的方式来实现。比如我会要求设计师导出一组序列帧图片
CSS 实现为

.fireworks {
position: absolute;
width: 150px;
height: 150px;
background: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
background-size: auto 150px;
animation: fireworks 1s steps(24) infinite;
}
@keyframes fireworks {
to {
background-position: 100%;
}
}

二、随机位置的烟花
现在烟花每次出现的位置都是相同的，太有规律显得不那么自然，那么如何实现一会在这里一会在那里的效果呢？这里可以再添加一个关键帧，随便改几个位置（不一定需要真的随机，只需要看着不那么规律即可）

@keyframes random {
25% {
transform: translate(200%, 50%);
}
50% {
transform: translate(80%, 80%);
}
75% {
transform: translate(20%, 60%);
}
}

然后把两个动画组合起来

.fireworks {
/* 其他 */
animation: fireworks 1s steps(24) infinite, random 4s infinite;
}

三、随机大小的烟花
随机位置有了，现在再加点大小变化，只需要在位置变化的基础上加上 scale 就可以了

@keyframes random {
25% {
transform: translate(200%, 50%) scale(0.8);
}
50% {
transform: translate(80%, 80%) scale(1.2);
}
75% {
transform: translate(20%, 60%) scale(0.65);
}
}

四、多个烟花随机绽放
单个烟花始终还是有些单调，现在多加几个，由于现在单个烟花会出现 4 个不同的位置，所以并不需要太多的 HTML 结构，每个给一个不同的位置

<div class="fireworks" style="left: 15%; top: 5%;"></div>
<div class="fireworks" style="right: 30%; top: 13%;"></div>
<div class="fireworks" style="left: 5%; top: 23%;"></div>
<div class="fireworks" style="right: 45%; top: 8%;"></div>