粒子上升渐变特效学习

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

image

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

<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元素如下

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

js如下

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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>

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

image

作者：hojun
链接：https://www.jianshu.com/p/65971bf0b4cb