直播视频网站源码用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>
以上就是直播视频网站源码用CSS 快速实现烟花绽放的相关代码, 更多内容欢迎关注之后的文章