今天小编为大家带来的是社区作者chokcoco的文章，看看他如何实现一个会动的鸿蒙LOGO吧~
本文将带大家简单实现一个会动的鸿蒙 LOGO。
emmm，写本文的动机是之前在看到一篇实现鸿蒙 LOGO 的文章。
鸿蒙的 LOGO 本身是这样的：
该篇作者最终实现的是一个字母 O 的动画展开过程：
而本文想尝试的，是该 LOGO 的其他一些细节，核心是倒影部分的水波效果。
实现主体
首先，我们需要对该结构进行简单的一个拆解，因为上下部分的较大差异，虽然是一个圆，但是很明显需要分成两块处理，这部分比较简单且不是重点，我就略过分享，直接上代码。
我们的结构大致如下：
<div class="g-container">
<div class="g-top">
<div class="g-bottom">
@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 滤镜能够实现半透明的烟熏或波状图像。通常用于实现一些特殊的纹理。滤镜利用 Perlin 噪声函数创建了一个图像。噪声在模拟云雾效果时非常有用，能产生非常复杂的质感，利用它可以实现了人造纹理比如说云纹、大理石纹的合成。
如果你对 SVG 滤镜还不算太了解，可以简单看看我的这几篇文章入门：有意思！强大的 SVG 滤镜（）以及这篇实战篇：震惊！巧用 SVG 滤镜还能制作表情包？（）
emmm，所以步骤是：
实现一个 SVG feTurbulence 效果
加上 SVG animation 动画，
再通过 CSS Filter 引用至滤镜到 DOM 结构之上
.g-bottom {
// 通过 Filter 引用 SVG 滤镜到 DOM 结构之上
filter: url(#fractal);
}
Wow，仅仅是一个滤镜的叠加，就瞬间让动画高大上了起来。这也是 SVG feTurbulence 滤镜的魅力所在，完成了 CSS 一些无法实现的功能。
通过渐变及 MASK 实现光圈
再看看原图，还有一圈圈的蓝色光圈，这个使用 repeating-radial-gradient 及 mask 可以实现。
简单的代码如下：
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 效果（虽然也不是很像，还有很多细节没还原）：
完整的代码：#/./svg/svg-feTurbulence-harmony-logo.md
脑洞一下
运用上述的 SVG feTurbulence 滤镜，我们能不能再搞点事情呢？
我们可以利用它，尝试去实现这样的效果，实现图片的部分动态波动，运用在特定的场景，能够非常大的提升用户体验，让人“哇塞”一下：
又或者是：
上述两个效果来自：，但是它们并非是使用 CSS + SVG 实现，而是使用的 WebGL，但是它们确实可以用上述的方式复现。
假设我们有这样一张图：
下面，我们就利用 SVG feTurbulence 让中间的石头波动起来：
我们让两张一模一样的图叠加在一起（使用 div 及它的伪元素即可）
利用clip-path将叠在上层的图中的石头切割出来
利用 SVG feTurbulence 将滤镜作用给上层的图片
完整的代码如下：
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);
}
}这样，我们就能得到一张动起来的石头，我们利用一张静态图，实现了其中部分的动态波动效果：
预览：
利用这个技巧，我们可以很轻松的还原上述两个使用 WebGL 实现的效果。
Amazing~
最后
好了，本文到此结束，希望对你有帮助 :)
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： lzxmw777声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
