《聲生不息》 是芒果TV、香港電視廣播有限公司和湖南衛視聯合推出的港樂競唱獻禮節目，聽著音樂仿佛回到了那個令人懷念的港風席卷整個亞洲的年代。該節目 Logo 採用經典紅藍配色，無限符號 ∞ 造型，滿滿的設計感。本文在僅採用原生 CSS 的情況下，儘量還原實現該 Logo 造型，本文內容雖然非常簡單，... ...
聲明：本文涉及圖文和模型素材僅用於個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。
背景
《聲生不息》 是芒果TV、香港電視廣播有限公司和湖南衛視聯合推出的港樂競唱獻禮節目，聽著音樂仿佛回到了那個令人懷念的港風席卷整個亞洲的年代。
該節目 Logo 採用經典紅藍配色，無限符號 ∞ 造型，滿滿的設計感。本文在僅採用原生 CSS 的情況下，儘量還原實現該 Logo 造型，本文內容雖然非常簡單，但是用到的知識點挺多的，比如：repeating-linear-gradient、clip-path、background-clip、Window.getComputedStyle()、CSSStyleDeclaration.getPropertyValue() 等。
效果
先來看看實現效果吧。
點擊右上角的 半圓 形狀，頁面主體可切換為白色。
線上預覽
