@importurl('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;1,200&display=swap');.g-container{width:100%;height:100%;background:#000;}.g-top{position:fixed;top:0;left:0;width:100vw;height:50vh;overflow:hidden;&::before{content:"";position:absolute;border-radius:50%；底部：0；左：50%；宽度：200px；高度：200px；变换：平移（-50%，100px）；框尺寸：边框框；背景：#000；边框：25pxsolid#fff；z-index:1;box-shadow:004px1pxrgba(255,255,255,.8),008px2pxrgba(255,255,255,.6);}}.g-bottom{position:fixed;top:50vh;left:0;width:100vw;height:50vh;背景:#000;溢出:隐藏;&::before{content:"";position:absolute;border-radius:50%;top:0;width:200px;height:200px;background:#000;left:50%;transform:translate(-50%,-100px);box-sizing:border-box;边框:25pxsolid#fff;z-index:2;box-shadow:004pxrgba(255,255,255,.8),008pxrgba(255,255,255,.7),0020pxrgba(255,255,255,.6);滤镜:模糊(4px);}}核心要做的是实现上下半圆，对下半部分使用模糊滤镜filter:blur()，我们初步可以得到这样一个结构：嗯，看起来很普通加上SVGfeTurbulence滤镜。实现水波反射效果就OK了，下面就是见证奇迹的时刻了。我们在下方的g-bottom中添加了一个SVGfeTurbulencefilter，使其产生水面反射效果。SVGfeTurbulence滤镜在我的很多文章中都有提到，Turbulence是指湍流、不稳定的气流，SVG滤镜可以实现半透明的烟雾或波浪形图像。通常用于实现一些特殊的纹理。该过滤器使用Perlin噪声函数创建图像。噪波在模拟云雾效果时非常有用，可以产生非常复杂的纹理。可用于实现云纹、大理石纹等人工纹理的合成。如果你对SVG滤镜不是很了解，你可以简单地看看我的这些文章：有趣！强大的SVG滤镜[2]和这篇实用文章：震撼！熟练使用SVG滤镜也能制作Emoticon包？[3]emmm，所以步骤是：实现一个SVGfeTurbulence效果加上SVGanimation动画，然后通过CSSFilter将滤镜引用到DOM结构.g-bottom{//通过Filterfilter:url(#fractal);}哇，光是叠加一个滤镜就瞬间让动画变高了。这也是SVGfeTurbulence滤镜的魅力所在，它完成了一些CSS无法实现的功能。通过gradient和MASK实现光圈看原图，有一圈蓝色的光圈，这个可以用repeating-radial-gradient和mask来实现。简单代码如下：div{background:repeating-radial-gradient(circleat50%100%,transparent,transparent5px,#2c5ec85.2px,#2c5ec86.2px,transparent6.5px);mask:radial-gradient(circleat50%100%,rgba(255,255,255,.8),transparent25%,transparent);}repeating-radial-gradient配合mask实现渐变光圈效果，效果如下：将这个光圈叠加到效果，还有一些其他的小细节和文字终于可以实现这样的LOGO效果（虽然不是很像，但还是有很多细节没有还原）：完整代码可以点这里：CSSinspiration--SVG滤镜和滤镜：模糊实现鸿蒙LOGO[4]使用上面提到的SVGfeTurbulence滤镜，我们可以做点别的吗？我们可以用它来尝试实现这样的效果，实现画面的一些动态波动，在特定的场景中使用。大大提升了用户体验，让人“哇”的一声：或者：（画面帧率有点低，放大看远处的天际线）以上两种效果来自：鼓室-失真效果[5]，但它们不是使用CSS+SVG而不是使用WebGL实现的，但它们确实可以通过上述方式重现。假设我们有这样一张图片：接下来，我们使用SVGfeTurbulence让中间的石头起伏：我们让两张相同的图片叠加（使用div及其伪元素），并使用clip-path堆叠中间的石头上图被剪掉，SVGfeTurbulence用于对上图应用滤镜。完整代码如下：div{position:relative;width:600px;height:400px；背景图片：url(https://z3.ax1x.com/2021/09/05/hWPVqe.jpg)；&::before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:inherit;clip-path:polygon(225px50px,320px50px,320px90%,225px90%);filter:url(#fractal);}}这样我们就可以得到a对于移动的石头，我们使用静态图片来实现部分动态波动效果：CodePenDemo--SVGfeTurbulenceImageEffect[6]利用这个技巧，我们可以很容易的还原出上面两个WebGL的实现。效果惊人~本文到此结束，希望对你有所帮助:)参考资料[1]产品经理：鸿蒙的开场动画很帅，让我们也来补一下页面：https://juejin.cn/post/6979042510400126983[2]有意思！强大的SVG滤镜：https://github.com/chokcoco/cnblogsArticle/issues/27[3]震惊！可以用SVG滤镜制作表情吗？：https://github.com/chokcoco/iCSS/issues/107[4]CSS灵感——SVG滤镜与滤镜：模糊实现HarmonyLOGO：https://csscoco.com/inspiration/#/./svg/svg-feTurbulence-harmony-logo.md[5]tympanus-失真效果：https://tympanus.net/Tutorials/HeatDistortionEffect/index3.html[6]CodePenDemo--SVGfeTurbulenceImage效果：https://codepen.io/Chokcoco/pen/VwWKxdb