@importurl('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;1,200&display=swap');.g-container{width:100%;高度：100%；背景：#000；}.g-top{位置：固定；顶部：0；左：0；宽度：100vw；高度：50vh；溢出：隐藏；&::之前{内容：“”；位置：绝对；边界半径：50%；底部：0；左：50%；宽度：200px；高度：200px；变换：平移（-50%，100px）；框大小：边框框；背景：#000；边框：25px实心#fff；z-索引：1；框阴影：004px1pxrgba(255,255,255,.8),008px2pxrgba(255,255,255,.6);}}.g-bottom{位置：固定；顶部：50vh;左：0；宽度：100vw；高度：50vh；背景：#000；溢出：隐藏；&::之前{内容：“”；位置：绝对；200像素；高度：200px；背景：#000；左：50%；变换：平移（-50%，-100px）；框大小：边框框；边框：25px实心#fff；z-指数：2；框阴影：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滤镜和这篇实用文章：震惊！巧用SVG滤镜也能做出表情包？emmm，所以步骤是：实现一个SVGfeTurbulenceeffect加上SVGanimation动画，然后通过CSSFilter将filter引用到DOM结构.g-bottom{//通过Filter引用SVG滤镜到在DOM结构滤镜之上：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效果（虽然不是很像，但还是有很多细节没有还原）：可以点击完整代码在这里：CSS灵感--SVG滤镜和滤镜：blur实现鸿蒙LOGO。让我们使用上面提到的SVGfeTurbulence过滤器，我们可以做点别的吗？我们可以用它来尝试实现这样的效果，实现画面的一些动态波动，在特定的场景下使用，可以大大提高用户体验，让人“哇”的一声：或者：以上两个效果来自:tympanus-DistortionEffect，但它们不是使用CSS+SVG实现的，而是使用WebGL实现的，但确实可以通过上述方式重现。假设我们有这样一张图片：接下来，我们使用SVGfeTurbulence让中间的石头起伏不定：我们让两张相同的图片叠加（使用div及其伪元素），使用clip-path堆叠在中间的石头上面的图片被切掉，然后使用SVGfeTurbulence将滤镜应用于上面的图片。完整代码如下：

div{位置：相对；宽度：600px；高度吨：400像素；背景图片：网址（https://z3.ax1x.com/2021/09/05/hWPVqe.jpg）；&::之前{内容：“”；位置：绝对；顶部：0；左：0；底部：0；右：0；背景：继承；剪辑路径：多边形（225px50px，320px50px，320px90%，225px90%）；过滤器：url（#fractal）；得到一个会动的石头，我们用一张静态图片来实现部分动态波动效果：CodePenDemo--SVGfeTurbulenceImageEffect利用这个技巧，我们可以很容易的还原出上面两种使用WebGL实现的效果，效果很神奇~最后，这个文章到此结束，希望对你有所帮助：）更多精彩的CSS效果，可以关注我的CSS灵感。更多精彩CSS技术文章汇总在我的Github——iCSS，持续更新。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。