透明气泡从水底缓缓上升，适合水下主题页面
← 返回 背景 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .bub{height:220px;border-radius:14px;background:#0b2a4a;position:relative;overflow:hidden}
.fx .bub i{position:absolute;bottom:-20px;border-radius:50%;background:rgba(74,158,255,.4);animation:kfx-rise linear infinite}
.fx .bub i:nth-child(1){left:10%;width:20px;height:20px;animation-duration:6s}
.fx .bub i:nth-child(2){left:28%;width:12px;height:12px;animation-duration:5s;animation-delay:1s}
.fx .bub i:nth-child(3){left:45%;width:26px;height:26px;animation-duration:7s;animation-delay:2s}
.fx .bub i:nth-child(4){left:62%;width:10px;height:10px;animation-duration:4.5s;animation-delay:.5s}
.fx .bub i:nth-child(5){left:78%;width:18px;height:18px;animation-duration:6.5s;animation-delay:1.5s}
.fx .bub i:nth-child(6){left:90%;width:14px;height:14px;animation-duration:5.5s;animation-delay:2.5s}
@keyframes kfx-rise{to{transform:translateY(-280px);opacity:.1}}<div class="fx">
<div class="bub"><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div>