Using CSS to realize the logo of the program "The Sound of Life"

Disclaimer: The graphic and model materials involved in this article are only for personal study, research and appreciation. Please do not re-modify, illegally spread, reprint, publish, commercialize, or conduct other profit-making activities.

background

"Sound Lives" is a Hong Kong Philharmonic competition and gift program jointly launched by Mango TV, Hong Kong Television Broadcasting Co., Ltd. and Hunan Satellite TV. Listening to the music, it is like returning to the era when the nostalgic Hong Kong style swept the whole of Asia.

The program Logo uses classic red and blue color matching, infinite symbol ∞ shape, full of design sense. In this article, in the case of only using the original CSS , try to restore the Logo shape. Although the content of this article is very simple, it uses a lot of knowledge points, such as: repeating-linear-gradient 、 clip-path 、 background-clip 、 Window.getComputedStyle() 、 CSSStyleDeclaration.getPropertyValue() 。

Effect

Let's take a look at the effect first.

Click the 半圆 shape in the upper right corner, and the main body of the page can be switched to white.

online preview

👁‍🗨 Github: https://dragonir.github.io/shengshengbuxi/
👁‍🗨 Codepen: https://codepen.io/dragonir/full/OJQRBad

accomplish

Before starting, use the main colors used in Logo as CSS variables . These colors will be used in many places in the future, and the page main color switching function should be realized through variables.

 :root {
  --black: #010101;
  --red: #F66034;
  --blue: #0A68DF;
}

Step 0: The first circle 🔴

Observation Logo The prototype can be found, the first 🔴 is a pure red stripe style effect, you can use repeating-linear-gradient to achieve the stripe background effect, and set the pseudo element ::after implements a ring style for the background black.

 <div class="logo">
  <div class="cycle cycle_1"></div>
</div>

 .cycle {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
}
.cycle_1 {
  z-index: 2;
  background: var(--red);
  background: repeating-linear-gradient(180deg,var(--red),var(--red) 12px, var(--black) 0,  var(--black) 22px);
  border: 12px solid var(--black);
}
.cycle_1::after {
  content: '';
  display: inline-block;
  height: 200px;
  width: 200px;
  background: var(--black);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  border-radius: 50%;
  z-index: 3;
}

💡 repeating-linear-gradient

repeating-linear-gradient creates a linear gradient consisting of repeating <image> , and linear-gradient with the same parameters, but it repeats the gradient in all directions to cover its entire container .

Syntax :

 repeating-linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                            \---------------------------------/ \----------------------------/
                                      渐变轴的定义                           色标列表

• <side-or-corner> : Describes the starting point position of the gradient line. It contains two keywords: the first one indicates the vertical position left or right and the second one indicates the horizontal position top or bottom 88f697f9bcb26---78f697 . The order of keywords has no effect and is optional. to top , to bottom , to left to right 036ff098a0e4c184f8f43cfebe35b1d6---这些值会被0度 、 180度 , 270度 and 90度 . The rest of the values are converted to an angle rotated clockwise from the top center. The end point of the gradient line is symmetrical to the center of its start point.
• <angle> : Specify the direction or angle of the gradient with an angle value. The angle increases clockwise .
• <color-stop> : consists of a <color> value followed by an optional end position, which can be a <percentage> or along the gradient axis <length> .

Example :

 // 一个倾斜45度的重复线性渐变, 从蓝色开始渐变到红色
repeating-linear-gradient(45deg, blue, red);
// 一个由下至上的重复线性渐变, 从蓝色开始，40%后变绿，最后渐变到红色
repeating-linear-gradient(0deg, blue, green 40%, red);

🎏 each repetition, the offset of the color stop position is a multiple of the base gradient length (the distance between the last color stop and the first). Therefore, the color value of the last color stop should be consistent with the color value of the first color stop; if it is not consistent, it will cause a very abrupt gradient effect.
🎏 Like other gradients, a linear repeating gradient does not provide a fixed size; that is, it has no original or preferred size, and no preferred scale. It will adapt to the size of the corresponding element.

Step 1: Second Circle 🔵

Add a second circle 🔵 on top of the first circle 🔴 , which is styled as a radial gradient from left to right, via linear-gradient i.e. Can achieve.

 <div class="logo">
  <div class="cycle cycle_1"></div>
  <div class="cycle cycle_2"></div>
</div>

 .cycle_2 {
  margin-left: -160px;
  background: linear-gradient(to right, var(--red), var(--blue));
  border: 12px solid var(--black);
}
.cycle_2::after {
  content: '';
  display: inline-block;
  height: 200px;
  width: 200px;
  background: var(--black);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  border-radius: 50%;
  z-index: 3;
}

Step 2: The overlapping part of the two circles 🔴🔵

For the bottom overlap, use clip-path to cut out a semicircle effect and place it on top of everything.

 .cycle_2::before {
  position: absolute;
  box-sizing: border-box;
  top: -12px;
  left: -12px;
  content: '';
  display: inline-block;
  height: 500px;
  width: 500px;
  background: var(--red);
  border-radius: 50%;
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  z-index: 3;
  border: 12px solid var(--black);
}

💡 clip-path

clip-path Use cropping to create the displayable area of the element. The part inside the area is displayed, and the part outside the area is hidden.

Syntax :

 // 关键字   值
// none
clip-path: none;
// <clip-source> 值
clip-path: url(resources.svg#c1);
// <geometry-box> 值
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
// <basic-shape> 值
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
// 盒模型和形状值结合
clip-path: padding-box circle(50px at 0 100px);
// 全局值
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;

• <clip-source> : referenced with url() <clipPath> element of SVG of ---266dcac7723109beb7596839621235a6---

• <basic-shape> : A shape whose size and position are defined by the value of <geometry-box> . If <geometry-box> is not specified, then border-box --- will be used as the reference frame. The value can be any of the following:

  • inset() : defines a inset rectangle.
  • circle() : defines a circle, using a radius and a center position.
  • ellipse() : Defines an ellipse, using two radii and a center position.
  • polygon() : Defines a polygon, using a SVG fill rule and a set of vertices.
  • path() : defines an arbitrary shape, using an optional SVG padding rule and a SVG path definition.

• <geometry-box> : If declared together with <basic-shape> , it will provide the corresponding reference box for the basic shape. By customization, it will include any shape corners (such as clipping paths defined by border-radius ) using the defined box edges. Optional values for geometry boxes:

  • margin-box : margin box as a reference box.
  • border-box : border box as a reference box.
  • padding-box : padding box as a reference box.
  • content-box : content box as a reference box.
  • fill-box : Use the object bounding box object bounding box as the reference box.
  • stroke-box : Use the stroke bounding box stroke bounding box as the reference box.
  • view-box : Use the most recent SVG viewport viewport as the reference box. If viewBox property is specified to create the SVG viewport for the element, the reference box will be positioned at the origin of the coordinate system, and the reference box will be positioned at the origin created by the viewBox property The origin of the coordinate system, the size of the reference box is used to set the width and height of the viewBox attribute.
• none : Do not create clipping paths.

Step 3: Overlap Optimization 🔴🔵

Setting the overlap to the same gradient color as the second circle 🔵 🔵 the illusion of transitioning from the first circle 🔴 to the second circle --- 63705b06139ba7da4bf600d324e7051d---.

 .cycle_2::before {
  background: linear-gradient(to right, var(--red), var(--blue));
}

Step 4: Text 🅰

Logo text is a gradient effect from left to right from blue to red, you can set the background of the text box to a gradient color, and then use background-clip: text to cut the background into the front of the text view to achieve.

 <h1 class="text">声生不息</h1>

 .text {
  background: linear-gradient(to right, var(--blue), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

💡 background-clip

background-clip Set whether the background image or color of the element extends below the border, padding box, and content box. If background-image or background-color is not set, then this property can only be seen if border , is set to non-transparent or translucent soild To the visual effect, otherwise the style changes generated by this property will be covered by the border.

Syntax :

 // 关键字         值
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
// 全局值
background-clip: inherit;
background-clip: initial;
background-clip: unset;

• border-box : The background extends to the outer edge of the border, but is below the border.
• padding-box : Background extends to padding padding outer edge. Will not draw to the border.
• content-box : The background is clipped to the outer edge of the content area content box .
• text : The background is clipped to the text's foreground color (experimental property).

Step 5: Click to switch effect 🔲

Click the semicircle pattern in the upper right corner ⌒ to switch Logo from color to pure white . This function is defined under :root by switching CSS变量 value can be achieved by the following method to achieve CSS变量 value switching.

 <span class="toggle" id="toggle" title="点击切换颜色"></span>

The noise background effect of the semicircular pattern ⌒ is achieved by adding a noise image.

 .toggle {
  background: linear-gradient(to left bottom, var(--blue), rgba(0, 0, 0, 0)), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAADFBMVEUvLy9eXl6AgICoqKhWH7o7AAAABHRSTlMSEhIS3WyPCwAAA1hJREFUOMsN0M3rDHEcwPH3d3y/4zcr67s1s3bIU62y8nBxcVCf79pZ4WBWsx6TVbvyEKUolJrxmBTj4SecVqE4OTjgIP6D5eC8DkouOJAj19fxhXJCWn811mk1Sp1q0J0q6AoNF7ZQ0uD+74CBj3otoUUEmJc0wqVEr2Ulatp1/6HYA9SGwfn+s6ftD8zsbic1idsPVrfcoQRYSrvbd7PdA7TY6cKcbfrwRXaJaqgTXSfDKd625S7XGB1YraJ0yuatOJmJvf5aqIwYINvBGIr+gZiDl80Qdoh3M1GTfuCzf1+yEetme3loJ3Hf6yijG5S9rRa7XI7Nzu1AYGF5Bd1cNeplTmN8yJpV8kYrpKEIAzXDgbBK2QhhTb37NP4P1aqRZ3ua6DVLb2AKjVpgBkbHie4QGFVqxDcpgL4tlTUMNKKgazpmWC+CkBBkTu59dpl+XikMg+U5izd/9z+KpxcFYvxxs01Vtho32XLZBNRmy8YWQBszOV6ES9r7cvQdshRbKVdfOrDKeyB+MeXsWvMmI95/Pdsp7J5MydZHR9MonithyhIllnSppjGaQRkb7vVyTaqNhLUsVI5I/HEDi3JYWdu+KEgsmkzJXGPZ97wQyqPREfp+vmAvzo3AfhF9HvZS1SiZL9H4pVgfhmofCltJ3wxq9/961Aaqq3HpzsFroqtPe9SVm3Ol5yd3f99TueB46l+9lB/drm4PxXs/4j4j5k6pAzS88njnDp72JijRYlYFRMaxfY8q20pWZjGLdKsCP2YoVYXl9RK1Kp7Xpx8MLYEe+gIWlUDwJNABR0AVAGQ4rfcCrci5YQYZonhi9ckLVrkTeCTeL5+0H7+Lw1baYjGu+6ddepc6qeLc8EhvL3dvf5Xi9maHyrGnCmFXXo7bk83O3C6FFYVDURtfLD4YVUpO011EfYvktpukxpKogevhPViJPC6tmWnOcxkaJYnwOw2zyoYKeAmKIlfpILLxBmOo3yLlkzh5+yTKmkvtrsc3oP8Tx7t8YTms2Be9a0TJNJ21Gb6k5mwY9Vn/P2vRSHu7tiZ2kx6mrMtCoqPG+9w3YWxOw5EZDcszz+tUQhZlq8j8Rw77ynqzi7XaV3kH8x62ScfWdhZpkgX3wWdZcibtbFASgOEfZmfZzbdc/O0AAAAASUVORK5CYII=');
}

 // 获取根元素
const root = document.querySelector(':root');
// 创建获取变量值的函数
const getCssVariable = (key) =>  {
  return getComputedStyle(root).getPropertyValue(key);
}
// 创建设置变量值的函数
const setCssVariable = (key, value) => {
  root.style.setProperty(key, value);
}
// 点击切换CSS变量值
document.getElementById('toggle').addEventListener('click', () => {
  if (getCssVariable('--blue') === '#FFFFFF') {
    setCssVariable('--blue', '#0A68DF');
    setCssVariable('--red', '#F66036');
  } else {
    setCssVariable('--blue', '#FFFFFF');
    setCssVariable('--red', '#FFFFFF');
  }
}, false);

💡 Window.getComputedStyle()

The Window.getComputedStyle() method returns an object that, after applying the active stylesheet and parsing any basic calculations those values may contain, returns all CSS attributes of the element value.

Syntax :

 let style = window.getComputedStyle(element, [pseudoElt]);

• Parameters :

  • element : ---b5de582067539bda23592535eeeddd44 Element used to get the calculation style.
  • pseudoElt : Optional, specify a string of pseudo-elements to match. Must be omitted or null for normal elements.
• Return Value : The returned style is a live CSSStyleDeclaration object that automatically updates when the element's style changes.

🎏 getComputedStyle伪元素拉取样式信息，如::after , ::before , ::marker , ::line-marker .

💡 CSSStyleDeclaration.getPropertyValue()

CSSStyleDeclaration.getPropertyValue() interface returns a DOMString containing the value of the requested CSS attribute.

Syntax :

 var value = style.getPropertyValue(property);

• Parameter : property is a DOMString , which is the attribute name to be queried CSS .
• Return value : value is DOMString , containing the value of the lookup attribute. If the corresponding property is not set, an empty string is returned.

Step 6: Noise Background ⬛

If you look closely, the background of the page is not pure black, but there will be a slight noise effect similar to TV 📺 snowflake ❄ , and the noise effect can be achieved by the following styles.

 <div class="bg"></div>

The background is a noise image. When setting the background, set the background-repeat to repeat and add the animation to achieve the noise shaking effect by translate .

 .bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAADFBMVEUvLy9eXl6AgICoqKhWH7o7AAAABHRSTlMSEhIS3WyPCwAAA1hJREFUOMsN0M3rDHEcwPH3d3y/4zcr67s1s3bIU62y8nBxcVCf79pZ4WBWsx6TVbvyEKUolJrxmBTj4SecVqE4OTjgIP6D5eC8DkouOJAj19fxhXJCWn811mk1Sp1q0J0q6AoNF7ZQ0uD+74CBj3otoUUEmJc0wqVEr2Ulatp1/6HYA9SGwfn+s6ftD8zsbic1idsPVrfcoQRYSrvbd7PdA7TY6cKcbfrwRXaJaqgTXSfDKd625S7XGB1YraJ0yuatOJmJvf5aqIwYINvBGIr+gZiDl80Qdoh3M1GTfuCzf1+yEetme3loJ3Hf6yijG5S9rRa7XI7Nzu1AYGF5Bd1cNeplTmN8yJpV8kYrpKEIAzXDgbBK2QhhTb37NP4P1aqRZ3ua6DVLb2AKjVpgBkbHie4QGFVqxDcpgL4tlTUMNKKgazpmWC+CkBBkTu59dpl+XikMg+U5izd/9z+KpxcFYvxxs01Vtho32XLZBNRmy8YWQBszOV6ES9r7cvQdshRbKVdfOrDKeyB+MeXsWvMmI95/Pdsp7J5MydZHR9MonithyhIllnSppjGaQRkb7vVyTaqNhLUsVI5I/HEDi3JYWdu+KEgsmkzJXGPZ97wQyqPREfp+vmAvzo3AfhF9HvZS1SiZL9H4pVgfhmofCltJ3wxq9/961Aaqq3HpzsFroqtPe9SVm3Ol5yd3f99TueB46l+9lB/drm4PxXs/4j4j5k6pAzS88njnDp72JijRYlYFRMaxfY8q20pWZjGLdKsCP2YoVYXl9RK1Kp7Xpx8MLYEe+gIWlUDwJNABR0AVAGQ4rfcCrci5YQYZonhi9ckLVrkTeCTeL5+0H7+Lw1baYjGu+6ddepc6qeLc8EhvL3dvf5Xi9maHyrGnCmFXXo7bk83O3C6FFYVDURtfLD4YVUpO011EfYvktpukxpKogevhPViJPC6tmWnOcxkaJYnwOw2zyoYKeAmKIlfpILLxBmOo3yLlkzh5+yTKmkvtrsc3oP8Tx7t8YTms2Be9a0TJNJ21Gb6k5mwY9Vn/P2vRSHu7tiZ2kx6mrMtCoqPG+9w3YWxOw5EZDcszz+tUQhZlq8j8Rw77ynqzi7XaV3kH8x62ScfWdhZpkgX3wWdZcibtbFASgOEfZmfZzbdc/O0AAAAASUVORK5CYII=') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
}
@keyframes bg-animation {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  // ...
  100% { transform: translate(5%,0) }
}

Complete code: https://github.com/dragonir/shengshengbuxi

Summarize

The knowledge points contained in this article mainly include:

• repeating-linear-gradient striped background
• clip-path Shape Cut
• background-clip set the background extension of the element
• Window.getComputedStyle() Get all calculated elements CSS value of attribute
• CSSStyleDeclaration.getPropertyValue() Get the value of the requested CSS property

If you want to know other front-end knowledge or WEB 3D development technology related knowledge, you can read my previous articles. Please indicate the original address and author when reprinting . If you think the article is helpful to you, don't forget to click three links 👍 .

appendix

• [1]. 📷 The front-end implements a very impressive browser-side scanning function
• [2]. 🌏 The Legend of Zelda: Breath of the Wild
• [3]. 🆒 Realize cyberpunk 2077 style visual effects with CSS only in a few steps
• ...

3D

• [1]. 🦊 Three.js implements a 3D open world game: Ali's multiverse
• [2]. 🔥 Three.js flame effect to realize the dynamic logo of Aerdun's Ring
• [3]. 🐼 Three.js Realize the 2022 Winter Olympics theme 3D fun page, including Bingdundun
• ...

refer to

• https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient
• https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
• https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
• https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
• https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue