闲聊
就在上周六,我去听了一场分享会,分享会大概分享了几个大主题:
- 如何及时在线上debug到错误信息,并且处理以及记录(window.onerror)
- web动画实践以及技巧(mvp非他莫属,这也是今天我要和大家share的主题)
- 前端自动化测试(wire mock的使用,讲真我还真没听懂多少。。)
短分享了几个小主题(15分钟内)
- 数据基本类型以及引用类型
- 矩阵算法(transform的原理等,好吧,这个我也没听懂多少。。我承认我菜)
- jsBinding(oc与js的交互技术,额,好吧,oc我不懂,所以没怎么看懂)
例子
demo地址: 烟花
开始
一说到要做烟花绽放的这种动画,大家一开始想到的应该是用粒子动画的方式来实现,这样成本会比较高。而且网上一搜也是一大把这种demo,下面我们就试试用简单的几句css3来实现这个效果吧!
html
<div class="bg">
<div class="fire"></div>
<div class="fire2"></div>
</div>
复制代码
css
body {
background: #000;
}
.fire, .fire2 {
background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528711658929&di=b1915568e41809ec716dd5fb197059bf&imgtype=0&src=http%3A%2F%2Fimg07.tooopen.com%2Fimages%2F20171215%2Ftooopen_sy_230419854445.jpg') no-repeat;
background-size: contain;
width: 200px;
height: 200px;
box-sizing: border-box;
background-clip: content-box;
border-radius: 100%;
}
.fire {
animation: firing 1.5s ease infinte;
-webkit-animation: firing 1.5s ease infinite;
}
.fire2 {
animation: firing2 1.5s ease infinte;
-webkit-animation: firing2 1.5s ease infinite;
}
@keyframes firing {
0%{ padding: 80px; transform: scale(0.5) translateY(0); opacity:1;}
75% { padding:0; transform: scale(1) translateY(0);}
100%{ opacity:0; transform:scale(1) translateY(100px);}
}
@-webkit-keyframes firing {
0%{ padding: 80px; -webkit-transform: scale(0.5) translateY(0); opacity:1;}
75%{ padding:0;-webkit-transform: scale(1) translateY(0);}
100%{ opacity:0;-webkit-transform:scale(1) translateY(100px);}
}
@keyframes firing2 {
0%{ padding: 80px; -webkit-transform: scale(0.5) translate(0); opacity:1; }
100%{ opacity: 0; -webkit-transform: scale(1); }
}
@-webkit-keyframes firing2 {
0%{ padding: 80px; -webkit-transform: scale(0.5) translate(0); opacity:1; }
100%{ opacity: 0; -webkit-transform:scale(1); }
}
复制代码
结语
用了两种效果,一种是y轴有偏移,另一种是y轴没有偏移。 第一种方法多了一个烟花绽放后掉落的过程,是原大神的分享,第二种是最简单的实现方式,也算过渡自然。