定陶住房和城乡建设局网站,深圳网站排名,中国住房和城乡建设网,长沙市网站制作电话#x1f680; 优质资源分享 #x1f680;
学习路线指引#xff08;点击解锁#xff09;知识定位人群定位#x1f9e1; Python实战微信订餐小程序 #x1f9e1;进阶级本课程是python flask微信小程序的完美结合#xff0c;从项目搭建到腾讯云部署上线#xff0c;打造一… 优质资源分享
学习路线指引点击解锁知识定位人群定位 Python实战微信订餐小程序 进阶级本课程是python flask微信小程序的完美结合从项目搭建到腾讯云部署上线打造一个全栈订餐系统。Python量化交易实战入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统
最近在 CodePen 上看到这样一个非常有意思的效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h9gfqLEW-1656996688611)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfdaaa08049e4df49e047e973c5106ad~tplv-k3u1fbpfcp-watermark.image?)]
这个效果的核心难点在于气泡的一种特殊融合效果。
其源代码在CodePen Demo – Goey footer作者主要使用的是 SVG 滤镜完成的该效果感兴趣的可以戳源码看看。
其中要想灵活运用 SVG 中的 feGaussianBlur 滤镜还是需要有非常强大的 SVG 知识储备的。那么仅仅使用 CSS 能否实现该效果呢
嘿嘿强大的 CSS 当然是可以的。本文就将带领大家一步步使用纯 CSS完成上述效果。
借助 SASS 完成大致效果
首先如果上述效果没有气泡的融合效果可能就仅仅是这样
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zewdRI8F-1656996688615)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf1a317a414e405e8006d5cb9b39f8c9~tplv-k3u1fbpfcp-watermark.image?)]
要制作这样一个效果还是比较简单的只是代码会比较多我们借助 SASS 预处理器即可。
假设我们有如下 HTML 结构
div classg-wrapdiv classg-footerdiv classg-bubbledivdiv classg-bubblediv// ... 200 个 g-bubblediv
div
核心要做的仅仅是让 200 个 .g-bubble 从底部无规律的进行向上升起的动画。
这里就需要运用我们在 深入浅出 CSS 动画 这篇文章中所介绍的一种技巧 – 利用 animation-duration 和 animation-delay 构建随机效果。
利用 animation-duration 和 animation-delay 构建随机效果
同一个动画我们利用一定范围内随机的 animation-duration 和一定范围内随机的 animation-delay可以有效的构建更为随机的动画效果让动画更加的自然。
我们来模拟一下如果是使用 10 个 animation-duration 和 animation-delay 都一致的圆的话核心伪代码
ullililili
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);}
}
这样小球的运动会是这样的整齐划一
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-joUcWeVj-1656996688616)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/528ab7057f384feeb35c1f940e7f9615~tplv-k3u1fbpfcp-zoom-1.image)]
要让小球的运动显得非常的随机只需要让 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 秒范围内随机这样我们就可以得到非常自然且不同的上升动画效果基本不会出现重复的画面很好的模拟了随机效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vokKlDcs-1656996688617)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63a2d6ac45c04077a53c5e4dfc26ca28~tplv-k3u1fbpfcp-watermark.image?)]
CodePen Demo – 利用范围随机 animation-duration 和 animation-delay 实现随机动画效果
好我们把上述介绍的技巧套用到我们本文要实现的效果中去HTML 结构再看一眼
div classg-wrapdiv classg-footerdiv classg-bubbledivdiv classg-bubblediv// ... 200 个 g-bubblediv
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);}
}
这里
我们利用了 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综合结果会生成这样一种布局均匀分散排布的圆形
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9tq1Swj-1656996688619)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7567b9e04dfa4a6e88b9e7f78b52465d~tplv-k3u1fbpfcp-zoom-1.image)] 注这里为了方便理解我隐藏了最外层 g-footer 的颜色并且给 g-bubble 添加了黑色边框 接着如果我们替换一下 animation 语句使用统一的动画时长去掉负的延迟变成 animation: moveToTop 4s ease-in-out infinite动画就会是这样
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y3QgAEyB-1656996688620)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d673a16c5e5451b8fb0a015ca4dff2d~tplv-k3u1fbpfcp-zoom-1.image)]
整体是整齐划一没有杂乱无章的感觉的。
运用上随机效果animation: moveToTop #{(random(2500) 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite就能得到上述的不同气泡随机上升的感觉
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PI5zFGgJ-1656996688621)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1c4c02c746843bdbe908900568a0262~tplv-k3u1fbpfcp-watermark.image?)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EG7X3pVE-1656996688621)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f73321c0eda48e0b8f7981da71482b2~tplv-k3u1fbpfcp-watermark.image?)]
添加融合效果
接下来也是最重要的一步如何让气泡与气泡之间以及气泡和底部 .g-footer 之间产生融合效果呢
这个技巧在此前非常多篇文章中也频繁提及过就是利用 filter: contrast() 滤镜与 filter: blur() 滤镜。
如果你还不了解这个技巧可以戳我的这篇文章看看你所不知道的 CSS 滤镜技巧与细节
简述下该技巧
单独将两个滤镜拿出来它们的作用分别是
filter: blur() 给图像设置高斯模糊效果。filter: contrast() 调整图像的对比度。
但是当他们“合体”的时候产生了奇妙的融合现象。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CL84mOMH-1656996688622)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2973c4eafd84078b5febce205984dd0~tplv-k3u1fbpfcp-zoom-1.image)]
仔细看两圆相交的过程在边与边接触的时候会产生一种边界融合的效果通过对比度滤镜把高斯模糊的模糊边缘给干掉利用高斯模糊实现融合效果。
基于此我们再简单改造下我们的 CSS 代码所需要加的代码量非常少
.g-wrap {background: #fff;filter: contrast(8);
}
.g-footer {// ... 其他保持一致filter: blur(5px);
}
就这么简单父容器添加白色底色以及对比度滤镜 filter: contrast(8)子容器添加 filter: blur(5px) 即可这样我们就能得气泡的融合效果基本得到我们想要的效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-33XVup9p-1656996688623)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbc1e364a4034c798707f1e407b590d3~tplv-k3u1fbpfcp-watermark.image?)]
利用 backdrop-filter 替代 filter 消除边缘
但是利用 filter: blur() 会有一个小问题。
运用了 filter: blur() 的元素元素边缘的模糊度不够会导致效果在边缘失真我们仔细看看动画的边缘
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Ce1XYLX-1656996688624)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4057e3783824949b0cf07383507075e~tplv-k3u1fbpfcp-zoom-1.image)]
如何解决呢也好办在这里我们尝试利用 backdrop-filter 去替换 filter。
两者之间的差异在于filter 是作用于元素本身而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素如果你想了解更多关于 backdrop-filter 的信息可以戳我的这篇文章深入探讨 filter 与 backdrop-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);}
}
我们通过去到原来添加在 .g-footer 上的 filter: blur(5px)通过他的伪元素叠加一层新的元素在它本身之上并且添加了替代的 backdrop-filter: blur(5px)。
当然因为这里的 blur(5px) 还需要为气泡与气泡之间的融合服务所以为了覆盖动画全区域我们还设置了 top: -300px扩大了它的作用范围。
最终我们就能完美的复刻文章一开头使用 SVG 滤镜实现的效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3TjMkR1K-1656996688625)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15f0e0cd7766409aa12b1bedfc77b58e~tplv-k3u1fbpfcp-watermark.image?)]
在文章中我省去了大部分基础的 CSS 代码完整的代码你可以戳这里CodePen Demo – Bubble Rises
最后
本文与之前的 巧用 CSS 实现酷炫的充电动画 内使用的技巧非常类似但本文也有一些新的知识点大家可以结合着一起看看。
好了本文到此结束希望对你有帮助
更多精彩 CSS 技术文章汇总在我的 Github – iCSS 持续更新欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议可以多多交流原创文章文笔有限才疏学浅文中若有不正之处万望告知。
想 Get 到最有意思的 CSS 资讯千万不要错过我的 iCSS 公众号 如果觉得文章对您有用请随意打赏。您的支持将鼓励我继续创作打赏支持## (_)打个赏喝个咖啡(_)
