一篇帶你實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的鴻蒙 LOGO
Hello 大家好，我是 Coco。本文將帶大家簡(jiǎn)單實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的鴻蒙 LOGO。
emmm，寫(xiě)本文的動(dòng)機(jī)是之前在掘金看到一篇實(shí)現(xiàn)鴻蒙 LOGO 的文章 -- 產(chǎn)品經(jīng)理：鴻蒙那個(gè)開(kāi)場(chǎng)動(dòng)畫(huà)挺帥的 給咱們頁(yè)面也整一個(gè)唄[1]
鴻蒙的 LOGO 本身是這樣的：
該篇作者最終實(shí)現(xiàn)的是一個(gè)字母 O 的動(dòng)畫(huà)展開(kāi)過(guò)程：
而本文想嘗試的，是該 LOGO 的其他一些細(xì)節(jié)，核心是倒影部分的水波效果。
實(shí)現(xiàn)主體
首先，我們需要對(duì)該結(jié)構(gòu)進(jìn)行簡(jiǎn)單的一個(gè)拆解，因?yàn)樯舷虏糠值妮^大差異，雖然是一個(gè)圓，但是很明顯需要分成兩塊處理，這部分比較簡(jiǎn)單且不是重點(diǎn)，我就略過(guò)分享，直接上代碼。
我們的結(jié)構(gòu)大致如下：
- <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);
- }
- }
核心做的就是上下兩個(gè)半圓的實(shí)現(xiàn)，以及對(duì)下面部分使用了模糊濾鏡 filter: blur()，我們可以初步得到這樣一個(gè)結(jié)構(gòu)：
好吧，看著確實(shí)是平平無(wú)奇。
添加 SVG feTurbulence 濾鏡。實(shí)現(xiàn)水波倒影效果
OK，下面就是見(jiàn)證奇跡的時(shí)刻。我們給下部分的 g-bottom 添加一個(gè) SVG feTurbulence 濾鏡，讓它產(chǎn)生水波倒影效果。
SVG feTurbulence 濾鏡在我的非常多篇文章中都有提到，turbulence 意為湍流，不穩(wěn)定氣流，而 SVG
- 如果你對(duì) SVG 濾鏡還不算太了解，可以簡(jiǎn)單看看我的這幾篇文章入門(mén)：有意思!強(qiáng)大的 SVG 濾鏡[2] 以及這篇實(shí)戰(zhàn)篇：震驚!巧用 SVG 濾鏡還能制作表情包?[3]
emmm，所以步驟是：
- 實(shí)現(xiàn)一個(gè) SVG feTurbulence 效果
- 加上 SVG animation 動(dòng)畫(huà)，
- 再通過(guò) CSS Filter 引用至濾鏡到 DOM 結(jié)構(gòu)之上
- <!-- HTML 結(jié)構(gòu)下的 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 {
- // 通過(guò) Filter 引用 SVG 濾鏡到 DOM 結(jié)構(gòu)之上
- filter: url(#fractal);
- }
Wow，僅僅是一個(gè)濾鏡的疊加，就瞬間讓動(dòng)畫(huà)高大上了起來(lái)。這也是 SVG feTurbulence 濾鏡的魅力所在，完成了 CSS 一些無(wú)法實(shí)現(xiàn)的功能。
通過(guò)漸變及 MASK 實(shí)現(xiàn)光圈
再看看原圖，還有一圈圈的藍(lán)色光圈，這個(gè)使用 repeating-radial-gradient 及 mask 可以實(shí)現(xiàn)。
簡(jiǎn)單的代碼如下：
- <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 實(shí)現(xiàn)漸隱的光圈效果，結(jié)果如下：
把這個(gè)光圈往效果里疊加，及其他一些小細(xì)節(jié)及文字，最終可以實(shí)現(xiàn)一個(gè)這樣的 LOGO 效果(雖然也不是很像，還有很多細(xì)節(jié)沒(méi)還原)：
完整的代碼你可以猛擊這里：CSS 靈感 -- SVG 濾鏡及 filter: blur 實(shí)現(xiàn)鴻蒙 LOGO[4]
腦洞一下
運(yùn)用上述的 SVG feTurbulence 濾鏡，我們能不能再搞點(diǎn)事情呢?
我們可以利用它，嘗試去實(shí)現(xiàn)這樣的效果，實(shí)現(xiàn)圖片的部分動(dòng)態(tài)波動(dòng)，運(yùn)用在特定的場(chǎng)景，能夠非常大的提升用戶體驗(yàn)，讓人“哇塞”一下：
又或者是：
(圖片幀率有點(diǎn)低，放大看遠(yuǎn)處的天際線)
上述兩個(gè)效果來(lái)自：tympanus - Distortion Effect[5]，但是它們并非是使用 CSS + SVG 實(shí)現(xiàn)，而是使用的 WebGL，但是它們確實(shí)可以用上述的方式復(fù)現(xiàn)。
假設(shè)我們有這樣一張圖：
下面，我們就利用 SVG feTurbulence 讓中間的石頭波動(dòng)起來(lái)：
- 我們讓兩張一模一樣的圖疊加在一起(使用 div 及它的偽元素即可)
- 利用 clip-path 將疊在上層的圖中的石頭切割出來(lái)
- 利用 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);
- }
- }
這樣，我們就能得到一張動(dòng)起來(lái)的石頭，我們利用一張靜態(tài)圖，實(shí)現(xiàn)了其中部分的動(dòng)態(tài)波動(dòng)效果：
CodePen Demo -- SVG feTurbulence Image Effect[6]
利用這個(gè)技巧，我們可以很輕松的還原上述兩個(gè)使用 WebGL 實(shí)現(xiàn)的效果。Amazing~
最后
好了，本文到此結(jié)束，希望對(duì)你有幫助 :)
參考資料
[1]產(chǎn)品經(jīng)理：鴻蒙那個(gè)開(kāi)場(chǎng)動(dòng)畫(huà)挺帥的 給咱們頁(yè)面也整一個(gè)唄:
https://juejin.cn/post/6979042510400126983
[2]有意思!強(qiáng)大的 SVG 濾鏡:
https://github.com/chokcoco/cnblogsArticle/issues/27
[3]震驚!巧用 SVG 濾鏡還能制作表情包?:
https://github.com/chokcoco/iCSS/issues/107
[4]CSS 靈感 -- SVG 濾鏡及 filter: blur 實(shí)現(xiàn)鴻蒙 LOGO:
https://csscoco.com/inspiration/#/./svg/svg-feTurbulence-harmony-logo.md
[5]tympanus - Distortion Effect:
https://tympanus.net/Tutorials/HeatDistortionEffect/index3.html
[6]CodePen Demo -- SVG feTurbulence Image Effect:
https://codepen.io/Chokcoco/pen/VwWKxdb
