前端使用CSS實現(xiàn)《聲生不息》節(jié)目Logo
聲明：本文涉及圖文和模型素材僅用于個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。
背景
《聲生不息》 是芒果TV、香港電視廣播有限公司和湖南衛(wèi)視聯(lián)合推出的港樂競唱獻禮節(jié)目，聽著音樂仿佛回到了那個令人懷念的港風席卷整個亞洲的年代。
該節(jié)目?Logo?采用經(jīng)典紅藍配色，無限符號?∞?造型，滿滿的設計感。本文在僅采用原生?CSS?的情況下，盡量還原實現(xiàn)該?Logo?造型，本文內容雖然非常簡單，但是用到的知識點挺多的，比如：repeating-linear-gradient、clip-path、background-clip、window.getComputedStyle()、CSSStyleDeclaration.getPropertyValue()?等。
效果
先來看看實現(xiàn)效果吧。
點擊右上角的?半圓?形狀，頁面主體可切換為白色。
在線預覽
??????Github：https://dragonir.github.io/shengshengbuxi/
??????Codepen：https://codepen.io/dragonir/full/OJQRBad
實現(xiàn)
開始之前，先把?Logo?中用到的主要顏色作為CSS變量，后續(xù)會在多處用到這幾種顏色，并要通過變量實現(xiàn)頁面主體顏色切換功能。
步驟0：第一個圓 ??
觀察?Logo?原型可以發(fā)現(xiàn)，第一個????是純紅色條紋樣式效果，可以通過?repeating-linear-gradient?實現(xiàn)條紋背景效果，并設置偽元素?::after?為背景黑色實現(xiàn)圓環(huán)樣式。
???repeating-linear-gradient
repeating-linear-gradient?創(chuàng)建一個由重復線性漸變組成的?<image>，和?linear-gradient?采用相同的參數(shù)，但它會在所有方向上重復漸變以覆蓋其整個容器。
語法：
side-or-corner：描述漸變線的起始點位置。它包含兩個關鍵詞：第一個指出垂直位置?
left?或?right，第二個指出水平位置top?或?bottom。關鍵詞的先后順序無影響，且都是可選的。to top,?to bottom,?to left?和?to right?這些值會被轉換成角度?0度、180度、270度?和?90度。其余值會被轉換為一個以向頂部中央方向為起點順時針旋轉的角度。漸變線的結束點與其起點中心對稱。angle：用角度值指定漸變的方向或角度。角度順時針增加。
color-stop：由一個?color 值組成，并且跟隨著一個可選的終點位置，可以是一個?percentage 或者是沿著漸變軸的?<length>。
示例：
??? 每次重復，色標位置的偏移量都是基準漸變長度（最后一個色標和第一個之間的距離）的倍數(shù)。因此，最后色標的色值應該與第一個色標的色值保持一致；如果不一致的話，會導致非常突兀的漸變效果。
??? 與其他漸變一樣，線形重復漸變沒有提供固定的尺寸；即, 它沒有原始尺寸或首選尺寸，也沒有首選的比例。它將自適應于對應元素的尺寸。
步驟1：第二個圓 ??
添加第二個圓????置于第一個圓????的底層，它的樣式是從左到右的徑向漸變，通過?linear-gradient?即可實現(xiàn)。
步驟2：兩個圓的重疊部分 ????
底部重疊部分，使用?clip-path?裁切出一個半圓效果，置于所有最頂層。
?? clip-path
clip-path?使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內的部分顯示，區(qū)域外的隱藏。
語法：
<clip-source>：用?
url()?引用?SVG?的?<clipPath> 元素<basic-shape>：一種形狀，其大小和位置由?<geometry-box> 的值定義。如果沒有指定?，則將使用?
border-box?用為參考框。取值可為以下值中的任意一個：inset()：定義一個?inset?矩形。circle()：定義一個圓形，使用一個半徑和一個圓心位置。ellipse()：定義一個橢圓，使用兩個半徑和一個圓心位置。polygon()：定義一個多邊形，使用一個?SVG?填充規(guī)則和一組頂點。path()：定義一個任意形狀，使用一個可選的?SVG?填充規(guī)則和一個?SVG?路徑定義。<geometry-box>：如果同?一起聲明，它將為基本形狀提供相應的參考框盒。通過自定義，它將利用確定的盒子邊緣包括任何形狀邊角（如被?
border-radius?定義的剪切路徑）。幾何框盒的可選值：margin-box：margin box?作為引用框。border-box：border box?作為引用框。padding-box：padding box?作為引用框。content-box：content box?作為引用框。fill-box：利用對象邊界框?object bounding box?作為引用框。stroke-box：使用筆觸邊界框?stroke bounding box?作為引用框。view-box：使用最近的?SVG?視口?viewport?作為引用框。如果?viewBox?屬性被指定來為元素創(chuàng)建?SVG?視口，引用框將會被定位在坐標系的原點，引用框位于由?viewBox?屬性建立的坐標系的原點，引用框的尺寸用來設置?viewBox?屬性的寬高值。none：不創(chuàng)建剪切路徑。
步驟3：重疊部分優(yōu)化 ????
將重疊部分設置為與第二個圓????相同的漸變色，可以產生由第一圓????過渡為第二圓????的錯覺。
步驟4：文字 ??
Logo?文字是從左到右由藍到紅的漸變效果，可以通過將文字的盒背景設置為漸變色，然后通過?background-clip: text?將背景被裁剪成文字的前景色來實現(xiàn)。
???background-clip
background-clip?設置元素的背景圖片或顏色是否延伸到邊框、內邊距盒子、內容盒子下面。如果沒有設置background-image?或?background-color，那么這個屬性只有在?border?被設置為非?soild、透明或半透明時才能看到視覺效果，否則本屬性產生的樣式變化會被邊框覆蓋。
語法：
border-box：背景延伸至邊框外沿，但是在邊框下層。padding-box：背景延伸至內邊距?padding?外沿。不會繪制到邊框處。content-box：背景被裁剪至內容區(qū)?content box?外沿。text：背景被裁剪成文字的前景色（實驗性屬性）。
步驟5：點擊切換效果 ??
點擊右上角的的半圓形圖案?⌒，可以實現(xiàn)將?Logo?從彩色切換為純白色，該功能是通過切換定義在?:root?下的?CSS變量?值實現(xiàn)的，可以通過以下方法實現(xiàn)?CSS變量?值的切換。
半圓形圖案?⌒?的噪點背景效果是通過添加一張噪點圖實現(xiàn)。
???Window.getComputedStyle()
Window.getComputedStyle()?方法返回一個對象，該對象在應用?active?樣式表并解析這些值可能包含的任何基本計算后，返回元素的所有?CSS?屬性的值。
語法:
參數(shù)：
element：用于獲取計算樣式的?Element。pseudoElt：可選，指定一個要匹配的偽元素的字符串。必須對普通元素省略或?null。返回值：返回的?
style?是一個實時的?CSSStyleDeclaration?對象，當元素的樣式更改時，它會自動更新。
???getComputedStyle?可以從偽元素拉取樣式信息，如?::after,?::before,?::marker,?::line-marker。
???CSSStyleDeclaration.getPropertyValue()
CSSStyleDeclaration.getPropertyValue()?接口返回一個?DOMString?，其中包含請求的?CSS?屬性的值。
語法：
參數(shù)：
property?是一個?DOMString，是需要查詢的?CSS?屬性名稱。返回值：
value?是?DOMString，包含查找屬性的值。若對應屬性沒有設置，則返回空字符串。
步驟6：噪點背景 ?
仔細觀察的話，頁面背景并不是單純的黑色，而是會有輕微的類似電視機????雪花???的噪點效果，通過以下樣式即可實現(xiàn)噪點效果。
背景是一張噪點圖片，設置背景時將?background-repeat?設置為?repeat?并添加通過translate?實現(xiàn)位移的動畫實現(xiàn)噪點晃動效果。
完整代碼：https://github.com/dragonir/shengshengbuxi
總結
本文包含的知識點主要包括：
repeating-linear-gradient?條紋背景clip-path?形狀裁切background-clip?設置元素的背景延伸Window.getComputedStyle()?獲取計算后元素的所有?CSS?屬性的值CSSStyleDeclaration.getPropertyValue()?獲取請求的?CSS?屬性的值
想了解其他前端知識或?
WEB 3D?開發(fā)技術相關知識，可閱讀我往期文章。轉載請注明原文地址和作者。如果覺得文章對你有幫助，不要忘了一鍵三連哦 ??。
附錄
[1].??? 前端實現(xiàn)很哇塞的瀏覽器端掃碼功能
[2].??? 前端瓦片地圖加載之塞爾達傳說曠野之息
[3].??? 僅用CSS幾步實現(xiàn)賽博朋克2077風格視覺效果
[4].??? Three.js 實現(xiàn)3D開放世界小游戲：阿貍的多元宇宙
[5].??? Three.js 火焰效果實現(xiàn)艾爾登法環(huán)動態(tài)logo
[6].??? Three.js 實現(xiàn)2022冬奧主題3D趣味頁面，含冰墩墩
參考
https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/getPropertyValue
