之前在某个网站发现有个粒子缓缓上升的特效，最近想用的时候发现找不到了找不到了找不到了。求助群里的大佬们，在大佬推荐的网站上找到了一样的特效。于是把特效顺带学习了波。
特效demo如下：
image
这里只取了Bubbles的特效。学习过程记录在代码注释中
css代码如下
.bubbles > .particle { opacity: 0; position: absolute; background-color: rgba(128,255,0,0.7); animation: bubbles 18s ease-in infinite; border-radius: 100%; }@keyframes bubbles { 0% { opacity: 0; } 5% { opacity: 1; transform: translate(0, -20%); } 100% { opacity: 0; transform: translate(0, -8000%); } }
html元素如下
Bubbles
js如下
好了，代码就学习到这里，实现原理已经明了啦。
最后预览下效果：
image
作者：hojun
链接：https://www.jianshu.com/p/65971bf0b4cb
