分享更有价值
被信任是一种快乐

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

文章页正文上

今天小编给大家分享一下CSS3怎么实现超酷炫的粘性气泡效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首先,如果上述效果没有气泡的融合效果,可能就仅仅是这样:要制作这样一个效果还是比较简单的,只是代码会比较多,我们借助 SASS 预处理器即可。假设我们有如下 HTML 结构:核心要做的,仅仅是让 200 个 .g-bubble 从底部无规律的进行向上升起的动画。这里,就需要运用一种技巧 — 利用 animation-duration 和 animation-delay 构建随机效果。同一个动画,我们利用一定范围内随机的 animation-duration 和一定范围内随机的 animation-delay,可以有效的构建更为随机的动画效果,让动画更加的自然。我们来模拟一下,如果是使用 10 个 animation-durationanimation-delay 都一致的圆的话,核心伪代码:这样,小球的运动会是这样的整齐划一:要让小球的运动显得非常的随机,只需要让 animation-durationanimation-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 滤镜技巧与细节简述下该技巧:单独将两个滤镜拿出来,它们的作用分别是:f免费云主机、域名ilter: 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怎么实现超酷炫的粘性气泡效果”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注云技术行业资讯频道。

相关推荐: web前端面试题实例代码分析

这篇文章主要讲解了“web前端面试题实例代码分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“web前端面试题实例代码分析”吧! 免费云主机、域名 我:呃~,针对这个问题,我想到了三种常见的方式:定位、flex…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册