本文将带大家简略实现一个会动的鸿蒙 LOGO。

emmm，写本文的动机是之前在掘金看到一篇实现鸿蒙 LOGO 的文章 -- 产品经理：鸿蒙那个收场动画挺帅的 给咱们页面也整一个呗

鸿蒙的 LOGO 自身是这样的：

该篇作者最终实现的是一个字母 O 的动画开展过程：

而本文想尝试的，是该 LOGO 的其余一些细节，外围是倒影局部的水波成果。

实现主体

首先，咱们须要对该构造进行简略的一个拆解，因为高低局部的较大差别，尽管是一个圆，然而很显著须要分成两块解决，这部分比较简单且不是重点，我就略过分享，间接上代码。

咱们的构造大抵如下：

<div class="g-container">    <div class="g-top">    </div>    <div class="g-bottom">    </div></div>
@import url('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%;        bottom: 0;        left: 50%;        width: 200px;        height: 200px;        transform: translate(-50%, 100px);        box-sizing: border-box;        background: #000;        border: 25px solid #fff;        z-index: 1;        box-shadow:             0 0 4px 1px rgba(255, 255, 255, .8),            0 0 8px 2px rgba(255, 255, 255, .6);    }}.g-bottom {    position: fixed;    top: 50vh;    left: 0;    width: 100vw;    height: 50vh;    background: #000;    overflow: hidden;        &::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;        border: 25px solid #fff;        z-index: 2;        box-shadow:             0 0 4px rgba(255, 255, 255, .8),            0 0 8px rgba(255, 255, 255, .7),            0 0 20px rgba(255, 255, 255, .6);        filter: blur(4px);    }}

外围做的就是高低两个半圆的实现，以及对上面局部应用了含糊滤镜 filter: blur()，咱们能够初步失去这样一个构造：

好吧，看着的确是平平无奇。

增加 SVG feTurbulence 滤镜。实现水波倒影成果

OK，上面就是见证奇观的时刻。咱们给下局部的 g-bottom 增加一个 SVG feTurbulence 滤镜，让它产生水波倒影成果。

SVG feTurbulence 滤镜在我的十分多篇文章中都有提到，turbulence 意为湍流，不稳固气流，而 SVG <feTurbulence> 滤镜可能实现半透明的烟熏或波状图像。通常用于实现一些非凡的纹理。滤镜利用 Perlin 噪声函数创立了一个图像。噪声在模仿云雾成果时十分有用，能产生非常复杂的质感，利用它能够实现了人造纹理比如说云纹、大理石纹的合成。

如果你对 SVG 滤镜还不算太理解，能够简略看看我的这几篇文章入门：有意思！弱小的 SVG 滤镜 以及这篇实战篇： 震惊！巧用 SVG 滤镜还能制作表情包？

emmm，所以步骤是：

  1. 实现一个 SVG feTurbulence 成果
  2. 加上 SVG animation 动画，
  3. 再通过 CSS Filter 援用至滤镜到 DOM 构造之上
<!-- HTML 构造下的 SVG 代码 --><svg>    <filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">        <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="10">            <animate                 attributeName="baseFrequency"                 dur="30s"                  values="0.01 0.01;0.03 0.15;0.01 0.01"                 repeatCount="indefinite" />        </feTurbulence>        <feDisplacementMap in="SourceGraphic" scale="15"></feDisplacementMap>    </filter></svg>
.g-bottom {    // 通过 Filter 援用 SVG 滤镜到 DOM 构造之上    filter: url(#fractal);}

Wow，仅仅是一个滤镜的叠加，就霎时让动画高大上了起来。这也是 SVG feTurbulence 滤镜的魅力所在，实现了 CSS 一些无奈实现的性能。

通过突变及 MASK 实现光圈

再看看原图，还有一圈圈的蓝色光圈，这个应用 repeating-radial-gradient 及 mask 能够实现。

简略的代码如下：

<div></div>
div {    background: repeating-radial-gradient(circle at 50% 100%, transparent, transparent 5px, #2c5ec8 5.2px, #2c5ec8 6.2px, transparent 6.5px);    mask: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .8), transparent 25%, transparent);}

repeating-radial-gradient 配合 mask 实现渐隐的光圈成果，后果如下：

把这个光圈往成果里叠加，及其他一些小细节及文字，最终能够实现一个这样的 LOGO 成果（尽管也不是很像，还有很多细节没还原）：

残缺的代码你能够猛击这里：CSS 灵感 -- SVG 滤镜及 filter: blur 实现鸿蒙 LOGO

脑洞一下

使用上述的 SVG feTurbulence 滤镜，咱们能不能再搞点事件呢？

咱们能够利用它，尝试去实现这样的成果，实现图片的局部动静稳定，使用在特定的场景，可能十分大的晋升用户体验，让人“哇塞”一下：

又或者是：

上述两个成果来自：tympanus - Distortion Effect，然而它们并非是应用 CSS + SVG 实现，而是应用的 WebGL，然而它们的确能够用上述的形式复现。

假如咱们有这样一张图：

上面，咱们就利用 SVG feTurbulence 让两头的石头稳定起来：

  1. 咱们让两张截然不同的图叠加在一起（应用 div 及它的伪元素即可）
  2. 利用 clip-path 将叠在下层的图中的石头切割进去
  3. 利用 SVG feTurbulence 将滤镜作用给下层的图片

残缺的代码如下：

<div></div><svg>    <filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">        <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.005 0.005" numOctaves="10">            <animate                 attributeName="baseFrequency"                 dur="60s"                  values="0.005 0.005;0.003 0.03;0.005 0.005"                 repeatCount="indefinite" />        </feTurbulence>        <feDisplacementMap in="SourceGraphic" scale="15"></feDisplacementMap>    </filter></svg>
div {    position: relative;    width: 600px;    height: 400px;    background-image: 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(225px 50px, 320px 50px, 320px 90%, 225px 90%);        filter: url(#fractal);    }}

这样，咱们就能失去一张动起来的石头，咱们利用一张动态图，实现了其中局部的动静稳定成果：

CodePen Demo -- SVG feTurbulence Image Effect

利用这个技巧，咱们能够很轻松的还原上述两个应用 WebGL 实现的成果。Amazing~

最初

好了，本文到此结束，心愿对你有帮忙 :)

更多精彩 CSS 成果能够关注我的 CSS 灵感。

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。