CSS3怎么实现超酷炫的粘性气泡效果

今天小编给大家分享一下CSS3怎么实现超酷炫的粘性气泡效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先，如果上述效果没有气泡的融合效果，可能就仅仅是这样：要制作这样一个效果还是比较简单的，免费云主机域名只是代码会比较多，我们借助 SASS 预处理器即可。假设我们有如下 HTML 结构：核心要做的，仅仅是让 200 个 .g-bubble 从底部无规律的进行向上升起的动画。这里，就需要运用一种技巧 — 利用 animation-duration 和 animation-delay 构建随机效果。同一个动画，我们利用一定范围内随机的 animation-duration 和一定范围内随机的 animation-delay，可以有效的构建更为随机的动画效果，让动画更加的自然。我们来模拟一下，如果是使用 10 个 animation-duration 和 animation-delay 都一致的圆的话，核心伪代码：这样，小球的运动会是这样的整齐划一：要让小球的运动显得非常的随机，只需要让 animation-duration 和 animation-delay 都在一定范围内浮动即可，改造下 CSS：我们利用 SASS 的循环和 random() 函数，让 animation-duration 在 2-4 秒范围内随机，让 animation-delay 在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果：CodePen Demo — 利用范围随机 animation-duration 和 animation-delay 实现随机动画效果好，我们把上述介绍的技巧，套用到我们本文要实现的效果中去，HTML 结构再看一眼：核心的 CSS 代码：这里：我们利用了 SASS 随机函数 $width: random(100) + px;，随机生成不同大小的 div 圆形利用 SASS 随机函数 left: #{(random(100)) + '%'}，top: #{(random(100))}px 基于父元素随机定位最为核心的是 animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite，让所有 div 圆的运动都是随机的上述（1）、（2）综合结果，会生成这样一种布局，均匀分散排布的圆形：接着，如果我们替换一下 animation 语句，使用统一的动画时长，去掉负的延迟，变成 animation: moveToTop 4s ease-in-out infinite，动画就会是这样：整体是整齐划一，没有杂乱无章的感觉的。运用上随机效果，animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite，就能得到上述的，不同气泡随机上升的感觉：接下来，也是最重要的一步，如何让气泡与气泡之间，以及气泡和底部 .g-footer 之间产生融合效果呢？这个技巧在此前非常多篇文章中，也频繁提及过，就是利用 filter: contrast() 滤镜与 filter: blur() 滤镜。如果你还不了解这个技巧，可以戳我的这篇文章看看：你所不知道的 CSS 滤镜技巧与细节简述下该技巧：单独将两个滤镜拿出来，它们的作用分别是：filter: blur()： 给图像设置高斯模糊效果。filter: contrast()： 调整图像的对比度。但是，当他们“合体”的时候，产生了奇妙的融合现象。仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。基于此，我们再简单改造下我们的 CSS 代码，所需要加的代码量非常少：就这么简单，父容器添加白色底色以及对比度滤镜 filter: contrast(8)，子容器添加 filter: blur(5px) 即可，这样，我们就能得气泡的融合效果，基本得到我们想要的效果：但是！利用 filter: blur() 会有一个小问题。运用了 filter: blur() 的元素，元素边缘的模糊度不够，会导致效果在边缘失真，我们仔细看看动画的边缘：如何解决呢？也好办，在这里，我们尝试利用 backdrop-filter 去替换 filter。两者之间的差异在于，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。简单改造下代码，原代码：改造后的代码：我们通过去到原来添加在 .g-footer 上的 filter: blur(5px)，通过他的伪元素，叠加一层新的元素在它本身之上，并且添加了替代的 backdrop-filter: blur(5px)。当然，因为这里的 blur(5px) 还需要为气泡与气泡之间的融合服务，所以为了覆盖动画全区域，我们还设置了 top: -300px，扩大了它的作用范围。最终，我们就能完美的复刻文章一开头，使用 SVG 滤镜实现的效果：以上就是“CSS3怎么实现超酷炫的粘性气泡效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注百云主机行业资讯频道。

相关推荐: Angular变更检测中的DOM更新机制是什么

这篇文章主要介绍“Angular变更检测中的DOM更新机制是什么”，在日常操作中，相信很多人在Angular变更检测中的DOM更新机制是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angular变更检测中的DOM更新机制是…