社区精选 | 使用纯 CSS 实现超酷炫的粘性气泡效果

今天为各位推荐的是社区作者 chokcoco 的文章 ，在这篇文章中擅长 CSS 的他实现了超炫酷的粘性气泡效果。（好有趣！）想 get 同款效果？那就让我们一起看看他是如何实现的吧！

最近，在 CodePen 上看到这样一个非常有意思的效果：

这个效果的核心难点在于气泡的一种特殊融合效果。

其源代码在：https://codepen.io/z-/pen/zYxdRQy

作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看。

其中，要想灵活运用 SVG 中的 feGaussianBlur 滤镜还是需要有非常强大的 SVG 知识储备的。那么，仅仅使用 CSS 能否实现该效果呢？

嘿嘿，强大的 CSS 当然是可以的。本文，就将带领大家一步步使用纯 CSS，完成上述效果。

借助 SASS 完成大致效果

首先，如果上述效果没有气泡的融合效果，可能就仅仅是这样：

要制作这样一个效果还是比较简单的，只是代码会比较多，我们借助 SASS 预处理器即可。

假设我们有如下 HTML 结构：

<div class="g-wrap">
  <div class="g-footer">
    <div class="g-bubble"></div>
    <div class="g-bubble"></div>
    // ... 200 个 g-bubble
  </div>
</div>

核心要做的，仅仅是让 200 个 .g-bubble 从底部无规律的进行向上升起的动画。

这里，就需要运用我们在 深入浅出 CSS 动画 这篇文章中所介绍的一种技巧 -- 利用 animation-duration 和 animation-delay 构建随机效果。

文章链接：https://github.com/chokcoco/iCSS/issues/141

利用 animation-duration 和 animation-delay 构建随机效果

同一个动画，我们利用一定范围内随机的 animation-duration 和一定范围内随机的 animation-delay，可以有效的构建更为随机的动画效果，让动画更加的自然。

我们来模拟一下，如果是使用 10 个 animation-duration 和 animation-delay 都一致的圆的话，核心伪代码：

<ul>
    <li></li>
    <!--共 10 个...--> 
    <li></li>
</ul>

ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}
li {
    background: #000;
    animation: move 3s infinite 1s linear;
}
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -100px);
    }
}

这样，小球的运动会是这样的整齐划一：

要让小球的运动显得非常的随机，只需要让 animation-duration 和 animation-delay 都在一定范围内浮动即可，改造下 CSS：

@for $i from 1 to 11 {
    li:nth-child(#{$i}) {
        animation-duration: #{random(2000)/1000 + 2}s;
        animation-delay: #{random(1000)/1000 + 1}s;
    }
}

我们利用 SASS 的循环和 random() 函数，让 animation-duration 在 2-4 秒范围内随机，让 animation-delay 在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果：

效果预览:https://codepen.io/Chokcoco/pen/JjyRYyR

好，我们把上述介绍的技巧，套用到我们本文要实现的效果中去，HTML 结构再看一眼：

<div class="g-wrap">
  <div class="g-footer">
    <div class="g-bubble"></div>
    <div class="g-bubble"></div>
    // ... 200 个 g-bubble
  </div>
</div>

核心的 CSS 代码：

.g-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 86px;
    width: 100%;
    background: #26b4f5;
}

@for $i from 0 through 200 { 
    .g-bubble:nth-child(#{$i}) {
        position: absolute;
        background: #26b4f5;
        $width: random(100) + px;
        left: #{(random(100)) + '%'};
        top: #{(random(100))}px;
        width: $width;
        height: $width;
        animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite;
    }
}
@keyframes moveToTop {
    90% {
        opacity: 1;
    }
    100% {
        opacity: .08;
        transform: translate(-50%, -180px) scale(.3);
    }
}

这里：

1. 我们利用了 SASS 随机函数 $width: random(100) + px;，随机生成不同大小的 div 圆形
2. 利用 SASS 随机函数 left: #{(random(100)) + '%'}，top: #{(random(100))}px 基于父元素随机定位
3. 最为核心的是 animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite，让所有 div 圆的运动都是随机的

添加融合效果

1. filter: blur()：给图像设置高斯模糊效果。
2. filter: contrast()：调整图像的对比度。

.g-wrap {
    background: #fff;
    filter: contrast(8);
}
.g-footer {
    // ... 其他保持一致
    filter: blur(5px);
}

利用 backdrop-filter 替代 filter 消除边缘

.g-footer {
    // ... 
    filter: blur(5px);
}

.g-footer {
    // ... 去掉 filter: blur(5px)
    &:before {
        content: "";
        position: absolute;
        top: -300px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        backdrop-filter: blur(5px);
    }
}

最后

SegmentFault 思否社区小编说

自 2022-07-01 起 SegmentFault 思否公众号改版啦！之后将陆续推出新的栏目和大家见面！（请拭目以待呀~❤）

在「社区精选」栏目中，我们将为广大开发者推荐来自 SegmentFault 思否开发者社区的优质技术文章，这些文章全部出自社区中充满智慧的技术创作者哦!

希望通过这一栏目，大家可以共同学习技术干货，GET 新技能和各种花式技术小 Tips。

欢迎越来越多的开发者加入创作者的行列，我们将持续甄选出社区中优质的内容推介给更多人，让闪闪发光的技术创作者们走到聚光灯下，被更多人认识。

「社区精选」投稿邮箱：pr@segmentfault.com

投稿请附上社区文章地址

关注公众号：拾黑（shiheibook）了解更多

赞助链接：

关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/