前端使用CSS实现《声生不息》节目Logo
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
背景
《声生不息》 是芒果TV、香港电视广播有限公司和湖南卫视联合推出的港乐竞唱献礼节目，听着音乐仿佛回到了那个令人怀念的港风席卷整个亚洲的年代。
该节目 Logo 采用经典红蓝配色，无限符号 ∞ 造型，满满的设计感。本文在仅采用原生 CSS 的情况下，尽量还原实现该 Logo 造型，本文内容虽然非常简单，但是用到的知识点挺多的，比如：repeating-linear-gradient、clip-path、background-clip、window.getComputedStyle()、CSSStyleDeclaration.getPropertyValue() 等。
效果
先来看看实现效果吧。
点击右上角的 半圆 形状，页面主体可切换为白色。
在线预览
👁🗨 Github：https://dragonir.github.io/shengshengbuxi/
👁🗨 Codepen：https://codepen.io/dragonir/full/OJQRBad
实现
开始之前，先把 Logo 中用到的主要颜色作为CSS变量，后续会在多处用到这几种颜色，并要通过变量实现页面主体颜色切换功能。
步骤0：第一个圆 🔴
观察 Logo 原型可以发现，第一个 🔴 是纯红色条纹样式效果，可以通过 repeating-linear-gradient 实现条纹背景效果，并设置伪元素 ::after 为背景黑色实现圆环样式。
💡 repeating-linear-gradient
repeating-linear-gradient 创建一个由重复线性渐变组成的 <image>，和 linear-gradient 采用相同的参数，但它会在所有方向上重复渐变以覆盖其整个容器。
语法：
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>。
示例：
🎏每次重复，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。
🎏与其他渐变一样，线形重复渐变没有提供固定的尺寸；即, 它没有原始尺寸或首选尺寸，也没有首选的比例。它将自适应于对应元素的尺寸。
步骤1：第二个圆 🔵
添加第二个圆 🔵 置于第一个圆 🔴 的底层，它的样式是从左到右的径向渐变，通过 linear-gradient 即可实现。
步骤2：两个圆的重叠部分 🔴🔵
底部重叠部分，使用 clip-path 裁切出一个半圆效果，置于所有最顶层。
💡 clip-path
clip-path 使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
语法：
<clip-source>：用
url()引用SVG的 <clipPath> 元素<basic-shape>：一种形状，其大小和位置由 <geometry-box> 的值定义。如果没有指定 ，则将使用
border-box用为参考框。取值可为以下值中的任意一个：inset()：定义一个inset矩形。circle()：定义一个圆形，使用一个半径和一个圆心位置。ellipse()：定义一个椭圆，使用两个半径和一个圆心位置。polygon()：定义一个多边形，使用一个SVG填充规则和一组顶点。path()：定义一个任意形状，使用一个可选的SVG填充规则和一个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属性被指定来为元素创建SVG视口，引用框将会被定位在坐标系的原点，引用框位于由viewBox属性建立的坐标系的原点，引用框的尺寸用来设置viewBox属性的宽高值。none：不创建剪切路径。
步骤3：重叠部分优化 🔴🔵
将重叠部分设置为与第二个圆 🔵 相同的渐变色，可以产生由第一圆 🔴 过渡为第二圆 🔵 的错觉。
步骤4：文字 🅰
Logo 文字是从左到右由蓝到红的渐变效果，可以通过将文字的盒背景设置为渐变色，然后通过 background-clip: text 将背景被裁剪成文字的前景色来实现。
💡 background-clip
background-clip 设置元素的背景图片或颜色是否延伸到边框、内边距盒子、内容盒子下面。如果没有设置background-image 或 background-color，那么这个属性只有在 border 被设置为非 soild、透明或半透明时才能看到视觉效果，否则本属性产生的样式变化会被边框覆盖。
语法：
border-box：背景延伸至边框外沿，但是在边框下层。padding-box：背景延伸至内边距padding外沿。不会绘制到边框处。content-box：背景被裁剪至内容区content box外沿。text：背景被裁剪成文字的前景色（实验性属性）。
步骤5：点击切换效果 🔲
点击右上角的的半圆形图案 ⌒，可以实现将 Logo 从彩色切换为纯白色，该功能是通过切换定义在 :root 下的 CSS变量 值实现的，可以通过以下方法实现 CSS变量 值的切换。
半圆形图案 ⌒ 的噪点背景效果是通过添加一张噪点图实现。
💡 Window.getComputedStyle()
Window.getComputedStyle() 方法返回一个对象，该对象在应用 active 样式表并解析这些值可能包含的任何基本计算后，返回元素的所有 CSS 属性的值。
语法:
参数：
element：用于获取计算样式的Element。pseudoElt：可选，指定一个要匹配的伪元素的字符串。必须对普通元素省略或null。返回值：返回的
style是一个实时的CSSStyleDeclaration对象，当元素的样式更改时，它会自动更新。
🎏getComputedStyle可以从伪元素拉取样式信息，如::after,::before,::marker,::line-marker。
💡 CSSStyleDeclaration.getPropertyValue()
CSSStyleDeclaration.getPropertyValue() 接口返回一个 DOMString ，其中包含请求的 CSS 属性的值。
语法：
参数：
property是一个DOMString，是需要查询的CSS属性名称。返回值：
value是DOMString，包含查找属性的值。若对应属性没有设置，则返回空字符串。
步骤6：噪点背景 ⬛
仔细观察的话，页面背景并不是单纯的黑色，而是会有轻微的类似电视机 📺 雪花 ❄ 的噪点效果，通过以下样式即可实现噪点效果。
背景是一张噪点图片，设置背景时将 background-repeat 设置为 repeat 并添加通过translate 实现位移的动画实现噪点晃动效果。
完整代码：https://github.com/dragonir/shengshengbuxi
总结
本文包含的知识点主要包括：
repeating-linear-gradient条纹背景clip-path形状裁切background-clip设置元素的背景延伸Window.getComputedStyle()获取计算后元素的所有CSS属性的值CSSStyleDeclaration.getPropertyValue()获取请求的CSS属性的值
想了解其他前端知识或
WEB 3D开发技术相关知识，可阅读我往期文章。转载请注明原文地址和作者。如果觉得文章对你有帮助，不要忘了一键三连哦 👍。
附录
[1]. 📷 前端实现很哇塞的浏览器端扫码功能
[2]. 🌏 前端瓦片地图加载之塞尔达传说旷野之息
[3]. 🆒 仅用CSS几步实现赛博朋克2077风格视觉效果
[4]. 🦊 Three.js 实现3D开放世界小游戏：阿狸的多元宇宙
[5]. 🔥 Three.js 火焰效果实现艾尔登法环动态logo
[6]. 🐼 Three.js 实现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
