之前在某个网站发现有个粒子缓缓上升的特效,最近想用的时候发现找不到了找不到了找不到了。求助群里的大佬们,在大佬推荐的网站上找到了一样的特效。于是把特效顺带学习了波。
特效demo如下:

这里只取了Bubbles的特效。学习过程记录在代码注释中
css代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
.bubbles > .particle {
/*初始透明度为0*/
opacity: 0;
position: absolute;
/*初始颜色为荧光色,透明度为0.7*/
background-color: rgba(128,255,0,0.7);
/*使用bubbles动画,持续时间18秒,缓慢进入,无限循环*/
animation: bubbles 18s ease-in infinite;
border-radius: 100%;
}
/*css keyframes 动画*/
@keyframes bubbles {
0% {
opacity: 0;
}
5% {
opacity: 1;
transform: translate(0, -20%);
}
/*这里-8000%表示是气泡的8000%*/
100% {
opacity: 0;
transform: translate(0, -8000%);
}
}
</style>

html元素如下

1
2
<!-- 这里让元素宽度100%(和页面等宽) -->
<div style="width: 100%; height: 100px; position: relative; bottom: 0px;" class="particletext bubbles">Bubbles</div>

js如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script>
function bubbles() {
$.each($(".particletext.bubbles"), function(){
var bubblecount = ($(this).width()/50)*10;
for(var i = 0; i <= bubblecount; i++) {
var size = ($.rnd(40,80)/10);
//这里的animation-delay很重要,关系到你的特效是否看上去是连续无断层的,上一步中css是18秒,所以这一步中延迟时间就设置成$.rnd(0,180)/10)
$(this).append('<span class="particle" style="top:' + $.rnd(20,80) + '%; left:' + $.rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,180)/10) + 's;"></span>');
}
});
}
jQuery.rnd = function(m,n) {
m = parseInt(m);
n = parseInt(n);
return Math.floor( Math.random() * (n - m + 1) ) + m;
}
bubbles();
</script>

好了,代码就学习到这里,实现原理已经明了啦。
最后预览下效果:

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦