前言
前面带着大家实了一个冒泡加载，这回给大家又带来一个名字和泡泡有关的效果——泡泡特效。顾名思义，就是可以产生很多泡泡的效果。话不多说，咱们直接看效果
码上掘金
接下来咱们进入正题。
JS部分
实现这个效果，除了要用基本的CSS样式，还需要一部分的JS代码才可以。接下来就是带大家实现关于该效果的JS部分。
<script>
function createBubble(){
const section = document.querySelector('section')
const createElement = document.createElement('span')
let size = Math.random()*60
createElement.style.width =20+ size + 'px'
createElement.style.height =20+ size + 'px'
createElement.style.left = Math.random()*innerWidth + 'px'
section.append(createElement)
setTimeout(()=>{
createElement.remove()
},4000)
}
setInterval(createBubble,50)
</script>
首先，代码定义了一个名为createBubble的函数。该函数用于创建气泡，并将其添加到网页中的一个section元素中。在函数内部，首先通过querySelector方法选取了一个section元素，并将其赋值给一个名为section的变量。
接下来，代码使用createElement方法创建了一个span元素，并将其赋值给一个名为createElement的变量。
然后，代码生成了一个随机数，并将其乘以60，得到一个随机的大小值。然后，代码将该大小值加上20，并将结果赋值给createElement元素的width和height属性，以设置气泡的宽度和高度。代码还生成了一个随机的left值，并将其赋值给createElement元素的left属性，以设置气泡的水平位置。
接下来，代码使用append方法将createElement元素添加到section元素中，以显示气泡。
最后，代码使用setTimeout方法，在4秒后将createElement元素从section元素中删除，以实现气泡的消失效果。最后一行代码使用setInterval方法，每50毫秒调用一次createBubble函数，以持续创建气泡，实现气泡效果的动画。
CSS部分
接下来就是为在JS中新创建的元素span添加样式了。我们首先来看一个全屏元素section的样式设置。
section{
width: 100%;
height: 100vh;
......
display: flex;
......
}
在HTML部分，创建了一个全屏的section元素，它是一个占满整个视口的容器，背景为黑色，其中的内容会垂直和水平居中显示。
接下来就是span元素的样式了，span元素是一个圆形的背景元素，位于section元素的底部。它有一个背景渐变效果，从白色逐渐变为透明。span元素通过动画效果在4秒内从底部向上移动，并逐渐消失。相关代码如下。
section span{
......
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
animation: animate 4s linear infinite;
}
section span::before{
content: '';
......
transform: scale(0.25) translate(-70%,-70%);
background: radial-gradient(#fff,transparent);
border-radius: 50%;
}
比较常见或者基础的样式这里就不占用过长篇幅，这里主要介绍一下比较关键的几个属性。通过box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5)设置元素的内阴影效果，使其呈现浅色阴影。再通过animation: animate 4s linear infinite为元素添加动画效果，该动画的编写后面会提到。
接下来就是为span添加伪元素了。content: ''设置伪元素的内容为空，该属性是伪元素里必不可少的一项。然后通过 transform: scale(0.25) translate(-70%,-70%)对伪元素进行缩放和平移变换，使其缩小为原来的0.25倍，并向左上方平移70% 的宽度和高度。最后给伪元素设置一个背景为径向渐变，颜色从白色到透明，并且使其呈现圆形，这里就是泡泡从0到1的形成过程了。
最后就是关于动画的设置部分，相关代码如下。
@keyframes animate {
0%{
transform: translateY(0%);
opacity: 1;
}
0%{
transform: translateY(0%);
opacity: 1;
}
100%{
transform: translateY(-1200%);
opacity: 0;
}
}
我们定义了一个名为animate的关键帧动画。该动画从0% 到100% 的时间范围内，通过transform属性和opacity属性来改变元素的位置和透明度。
在0% 的时候，元素的transform属性设置为translateY(0%)，表示元素在垂直方向上不发生位移，opacity属性设置为1，表示完全不透明。
在100% 的时候，元素的transform属性设置为translateY(-1200%)，表示元素在垂直方向上向上移动了1200% 的高度，即向上消失，opacity属性设置为0，表示完全透明。
通过将这些关键帧动画的样式定义在@keyframes规则中，可以在实际使用时将其应用于元素，使元素按照定义的样式变化进行动画效果。
总结
以上就是泡泡特效的实现过程了，在代码中既有CSS样式的处理，也有JS逻辑的部分，可以值得学习一下，感兴趣的同学可以在码上掘金中查看完整代码。
