Heim >Web-Frontend >CSS-Tutorial >Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

青灯夜游nach vorne: 2022-01-27 10:52:592465Durchsuche

In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie mit reinem CSS einen chinesischen Knoten zeichnen und diesem chinesischen Knoten einen Regenanimationseffekt mit rotem Umschlag hinzufügen.

Das Frühlingsfest ist das wichtigste Fest für das chinesische Volk. Während des Frühlingsfestes gibt es viele Bräuche, die sich von Osten nach Westen, Norden und Süden unterscheiden. Um die Atmosphäre des neuen Jahres zu verstärken, wird jeder Haushalt im neuen Jahr verschiedene Neujahrsartikel und Dekorationen kaufen, um das Zuhause wohlhabend zu machen, darunter rote Laternen, rote Couplets, rote Segenszeichen und rote chinesische Knoten.

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

Das Rohmaterial des chinesischen Knotens ist ein einfaches rotes Seil, das nach der genialen Konzeption der Alten zu einem Diamantgitter verwoben wird. Die Seile des Gitters sind eng miteinander verbunden und symbolisieren die Einheit, Harmonie und das Glück der Familie.

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

Wie kann man also mit CSS einen chinesischen Knoten erreichen? Schauen wir uns zunächst den endgültigen Effekt an.

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

Online-Vorschau Codepen-Adresse:
https://codepen.io/cliea/pen/LYOPbBr

Sie können auch so tolle Effekte erstellen, fangen wir an!

1. Sammeln Sie Materialien, je einfacher, desto besser. Suchen Sie zunächst im Internet nach einem Bild von chinesischen Knoten. Wir wählen den klassischsten chinesischen Knotenstil. Die Qualität des Bildes bestimmt die Qualität des Endprodukts. Unten sehen Sie ein Bild eines relativ sauberen und klaren chinesischen Knotens. Als Referenz beim Schreiben von CSS.

2. Beobachten Sie die Details und überlegen Sie sich die Möglichkeit der Implementierung

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu! Können Sie jetzt mit dem Schreiben von Code beginnen, da Sie Bilder haben? Natürlich nicht.

Überlegen Sie sich zunächst, was Sie jetzt tun müssen: Einen chinesischen Knoten mit CSS zeichnen.

Hast du wirklich darüber nachgedacht? Ist das ein erreichbares Ziel? Stellen Sie sich vor, Ihr Vorgesetzter weist Ihnen eine Aufgabe zu: Lassen Sie die Farbe der Telefonhülle entsprechend der Themenfarbe der APP wechseln. Fangen Sie einfach an, Code zu schreiben?

Sie werden über zwei Fragen nachdenken:

Verfügt die APP als Software über eine Schnittstelle zur Interaktion mit der Handyhülle?

Wie ändert die Handyhülle ihre Farbe, wenn sie den Farbwert empfängt
Das ist ein ziemlich extremer Punkt. Beide oben genannten Punkte können beispielsweise nicht erreicht werden. Zurück zu CSS und diesem Bild eines chinesischen Knotens. Das erste, worüber wir nachdenken müssen, ist: „Welche CSS-Techniken sollten wir verwenden, um dieses Bild zu erreichen?“. Gehen Sie nun zurück und schauen Sie sich das Bild oben genauer an.

Beobachtung

haben wir folgende Schlüsselpunkte gefunden:

Das Seil des chinesischen Knotens besteht aus Farbverläufen, dunkelrot, hellrot, dunkelrot

Dann
vorhersagen
Implementierungsprinzip
:
Farbverlauf mit gerader Linie, verwenden Sie linear-gradient oder repeating-linear-gradient
Ringgradient, verwenden Sie radial-gradient

Schnittpunkt des Gitters, verwenden Sie mask, um den Schnitteffekt zu erzielendrei- Viertel des Rings und der Boden. Zwei gebogene Seile werden mit clip-path geschnitten.

Um die Codierung komfortabler zu gestalten, verwenden Sie SCSS. linear-gradient 或者 repeating-linear-gradient
环状渐变，使用 radial-gradient
网格的交叉，使用 mask 遮罩来达到交叉效果
四分之三环以及底部两根弯曲的绳子使用 clip-path 来裁剪
为了使编码更方便，采用 SCSS
许多地方可以使用 ::before ::after 实现，减少html代码

3. 结构拆分，化整为零

上面是从技术角度从整体观察，下面就是对整个图片进行拆分，先确定其 html 结构。

中间像棋盘一样的网格结构，可以作为一个 html 标签

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

四周16个小半圆，使用16个标签定位实现

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

两个四分之三圆，放在一组里，使用相同的样式，第二个基于第一个旋转180deg

Das können Sie Verwenden Sie :: an vielen Stellen vor ::nach Implementierung, um den html-Code zu reduzieren Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

🎜

3. Strukturaufteilung und Neuorganisation Es ist Null🎜🎜Das Obige ist eine allgemeine Beobachtung aus technischer Sicht, und im Folgenden wird das gesamte Bild aufgeteilt und zunächst seine html-Struktur bestimmt. 🎜

html

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

180 Grad

Zwei Kreuzknoten haben den gleichen Stil, daher werden sie auch in einer Gruppe platziert

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

Die oberen drei kleinen Strukturen werden in einer Gruppe platziert und die äußere Ebene wird header genannt header

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

底部左右两部分高度相似，也放在一组，命名为footer

1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

这样我们得到了 html 的结构

<div class="chinese-knot">
  <div class="grid"></div>
  <div class="ring-small">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </div>
  <div class="ring-big">
    <i><b></b></i>
    <i><b></b></i>
  </div>
  <div class="cross-node">
    <div class="node">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
    <div class="node">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </div>
  <div class="header">
    <i></i>
    <b></b>
    <span></span>
  </div>
  <div class="footer">
    <b></b>
    <b></b>
    <div class="tassels">
      <i></i>
      <i></i>
    </div>
  </div>
</div>

实际编码当中，html 并不是一次写成，而是经过不断调整才成为上面这个样子。

二、CSS逐个实现中国结部件

1. 网格

网格最终效果是个菱形，也就是正方形旋转了45deg，我们先不旋转，看看它是什么样子

1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

先设定一个变量，表示绳子的宽度，我们设为--width，这个尺寸很重要，后面所有尺寸都是基于这个宽度，这样后面我们调整整个图形的大小，只要改这一个--width就行了。

:root {
  --width: 1.7vh;
}

垂直和水平都各有11根绳，绳子之间的间隙约为绳子宽度的 0.5 倍，所以可以得到网格的宽高都为 11 + 0.5 * 10 = 16 倍的绳子宽度，所以我们可以这样写：

:root {
  --width: 1.7vh;
  --grid-width: calc(var(--width) * 16);
}
.grid {
  width: var(--grid-width);
  height: var(--grid-width);
}

给 body 加上一些样式，让盒子居中，再加一个深色背景

body{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1d1e22;
  overflow: hidden;
}

再给 .grid 也加一个白色背景色，测试一下：

1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

这样屏幕正中间就出现了一个白色方块，下面我们把白色背景改成11根线的样式：

:root{
  --width: 1.7vh;
  --red-1: #f40001;
  --red-2: #d40000;
  --red-3: #8c0703;
  --rope: 
    var(--red-3), 
    var(--red-2) calc(var(--width) * 0.25), 
    var(--red-1) calc(var(--width) * 0.45), 
    var(--red-1) calc(var(--width) * 0.55), 
    var(--red-2) calc(var(--width) * 0.75), 
    var(--red-3) var(--width);
  --grid-width: calc(var(--width) * 16);
  --bg-line: linear-gradient(90deg, var(--rope), transparent var(--width)) 0 0 / calc(var(--width) * 1.5) calc(var(--width) * 1.5);
}
.grid{
  width: var(--grid-width);
  height: var(--grid-width);
  background: var(--bg-line);
}

就得到了下面的效果：

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

可能你有点蒙圈。发生了什么事情？

还是让事情变得简单点，我们先画一根不带渐变的红线：

.grid{
  background: linear-gradient(
    90deg, 
    var(--red-1), 
    var(--red-1) var(--width), 
    transparent var(--width)
  );
}

1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

先是一个线性渐变 linear-gradient，然后旋转角度设为90deg，让它从左到右渐变（默认是从下往上），然后起始值设为--red-1（你问我red-1到red-3哪来的？效果图上吸来的），在--width处也设置为--red-1，这样就得到了一根宽为 --width 的红线。但这还没完，得接着在--width 处加一个透明transpanrent，这样从--width直到图形的最右侧就都不填充颜色了。

但这不太像根绳子，让红线渐变起来：

.grid{
  background: linear-gradient(
    90deg, 
    var(--red-3), 
    var(--red-2) calc(var(--width) * 0.25), 
    var(--red-1) calc(var(--width) * 0.45), 
    var(--red-1) calc(var(--width) * 0.55), 
    var(--red-2) calc(var(--width) * 0.75), 
    var(--red-3) var(--width), 
    transparent var(--width)
  );
}

1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

这样就得到了一根有一点点立体效果的绳子。可是怎么让它横向重复11次，并且间隔0.5倍的--width呢？看下面的代码：

.grid{
  background: linear-gradient(
    90deg, 
    var(--red-3), 
    var(--red-2) calc(var(--width) * 0.25), 
    var(--red-1) calc(var(--width) * 0.45), 
    var(--red-1) calc(var(--width) * 0.55), 
    var(--red-2) calc(var(--width) * 0.75), 
    var(--red-3) var(--width), 
    transparent var(--width)
  ) 0 0 / calc(var(--width) * 1.5) calc(var(--width) * 1.5);
}

大家来找茬：这段代码和上一段有什么不同？眼尖的你可能已经看出来了，多了这一行：

0 0 / calc(var(--width) * 1.5) calc(var(--width) * 1.5)

以/为分界线，左边的含义是background-positoin，右边的含义是background-size。

0 0也就是左上角。calc(var(--width) * 1.5) calc(var(--width) * 1.5) 也就是一个正方形，宽度为1.5倍绳宽。

1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

这样一个小方块，在垂直和水平方向上重复，就得了我们想要的结果：

1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

可是我们想要的是网格，现在顶多也就算个栅格。

那就使用伪类复制一份，并且旋转90deg

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu! 1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

Unten links und rechts Die beiden Teile sind sich sehr ähnlich und werden auch zusammen gruppiert, genannt Fußzeile

html

:root{
  --width: 1.7vh;
  --red-1: #f40001;
  --red-2: #d40000;
  --red-3: #8c0703;
  --rope: 
    var(--red-3), 
    var(--red-2) calc(var(--width) * 0.25), 
    var(--red-1) calc(var(--width) * 0.45), 
    var(--red-1) calc(var(--width) * 0.55), 
    var(--red-2) calc(var(--width) * 0.75), 
    var(--red-3) var(--width);
  --grid-width: calc(var(--width) * 16);
  --bg-line: linear-gradient(90deg, var(--rope), transparent var(--width)) 0 0 / calc(var(--width) * 1.5) calc(var(--width) * 1.5);
}
.grid {
  width: var(--grid-width);
  height: var(--grid-width);
  background: var(--bg-line);
  &:after {
    content: "";
    display: block;
    width: var(--grid-width);
    height: var(--grid-width);
    background: var(--bg-line);
    transform: rotate(90deg);
  }
}

2. CSS implementiert nacheinander chinesische Knotenkomponenten

1Der endgültige Effekt des Gitters ist die Raute, das heißt, das Quadrat ist um 45 Grad gedreht. Mal sehen, wie es aussieht, ohne es vorerst zu drehen🎜🎜 1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

🎜🎜Legen Sie zunächst eine Variable fest, um die Breite des Seilsdarzustellen >, setzen wir es auf --width, diese Größe ist sehr wichtig, alle nachfolgenden Größen basieren auf dieser Breite, also passen wir später die Größe der gesamten Grafik an, Ändern Sie einfach diesen Code mit --width. 🎜

:root{
    ...
    --conic: #000 0 90deg, transparent 0 100%;
}

.grid {
  ...
  &:after {
    ...
    -webkit-mask: conic-gradient(from 0deg at var(--width) calc(var(--width) * 1.5), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 90deg at calc(var(--width) * 2.5) 0, var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 180deg at calc(var(--width) * 1.5) var(--width), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 90deg at 0 calc(var(--width) * 2.5), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3);
  }
}

🎜Es gibt 11 Seile, jeweils vertikal und horizontal. Der Abstand zwischen den Seilen beträgt etwa das 0,5-fache der Breite der Seile, sodass die Breite und Höhe des Gitters variieren kann erhalten wir als 11 + 0,5 * 10 = 16 mal die Breite des Seils, also können wir schreiben: 🎜

:root{
  --width: 1.7vh;
  --red-1: #f40001;
  --red-2: #d40000;
  --red-3: #8c0703;
  --rope: 
    var(--red-3), 
    var(--red-2) calc(var(--width) * 0.25), 
    var(--red-1) calc(var(--width) * 0.45), 
    var(--red-1) calc(var(--width) * 0.55), 
    var(--red-2) calc(var(--width) * 0.75), 
    var(--red-3) var(--width);
  --grid-width: calc(var(--width) * 16);
  --bg-line: linear-gradient(90deg, var(--rope), transparent var(--width)) 0 0 / calc(var(--width) * 1.5) calc(var(--width) * 1.5);
  --conic: #000 0 90deg, transparent 0 100%;
}
body{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1d1e22;
  overflow: hidden;
}
.grid {
  width: var(--grid-width);
  height: var(--grid-width);
  background: var(--bg-line);
  &:after {
    content: "";
    display: block;
    width: var(--grid-width);
    height: var(--grid-width);
    background: var(--bg-line);
    transform: rotate(90deg);
    -webkit-mask: conic-gradient(from 0deg at var(--width) calc(var(--width) * 1.5), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 90deg at calc(var(--width) * 2.5) 0, var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 180deg at calc(var(--width) * 1.5) var(--width), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 90deg at 0 calc(var(--width) * 2.5), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3);
  }
}

🎜Fügen Sie einige Stile zum Körper hinzu, um die Box zu zentrieren und Füge einen Tiefenfarbhintergrund hinzu🎜

<div class="grid"></div>

🎜Füge eine weiße Hintergrundfarbe zu .grid hinzu und teste es:🎜🎜

🎜🎜Ein weißes Quadrat erscheint in der Mitte des Bildschirms. Jetzt ändern wir den weißen Hintergrund in

11Der Stil der Stammzeile: 🎜<pre class="brush:html;toolbar:false;">  &lt;div class=&quot;ring-small&quot;&gt;
    &lt;i&gt;&lt;/i&gt;
  &lt;/div&gt;</pre>🎜 wird den folgenden Effekt erzielen: 🎜🎜<img src="https://img.php.cn/upload/image/379/730/637/164325083675438Ich%20f%C3%BChre%20Sie%20Schritt%20f%C3%BCr%20Schritt%20durch%20das%20Zeichnen%20eines%20chinesischen%20Knotens%20mit%20reinem%20CSS%20und%20f%C3%BCge%20Animationseffekte%20hinzu!" title=" 164325083675438Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!" alt="Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!">🎜🎜Vielleicht bist du etwas verwirrt. Was ist passiert? 🎜🎜Um es einfacher zu machen, zeichnen wir zuerst eine rote Linie ohne Farbverlauf: 🎜<pre class="brush:css;toolbar:false;">.ring-small {
  i {
    position: absolute;
    width: calc(var(--width) * 2.5);
    height: calc(var(--width) * 1.5);
    background: radial-gradient(
        circle at 50% 100%, 
        transparent calc(var(--width) * 0.25), 
        var(--red-3) calc(var(--width) * 0.25), 
        var(--red-2) calc(var(--width) * (0.25 + 0.25)),
        var(--red-1) calc(var(--width) * (0.25 + 0.45)), 
        var(--red-1) calc(var(--width) * (0.25 + 0.55)), 
        var(--red-2) calc(var(--width) * (0.25 + 0.75)),
        var(--red-3) calc(var(--width) * (0.25 + 1)), 
        transparent calc(var(--width) * (0.25 + 1))
    );
  }
}</pre>🎜<img src="https://img.php.cn/upload/image/924/565/363/1643250840811960%20.png" title="1643250840811960.png" alt="1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!">🎜🎜Zuerst ist ein linearer Farbverlauf <code>linear-gradient

, und dann wird der Drehwinkel auf 90deg eingestellt, Make Es verläuft von links nach rechts (Standard ist von unten nach oben) und setzt dann den Startwert auf --red-1 (Sie fragen mich, red-1 bis red-3? (aus dem Rendering) und setzen Sie es auf --red-1 bei --width, so Sie erhalten eine rote Linie mit einer Breite von --width. Aber das ist noch nicht vorbei, Sie müssen bei --width ein transparentes transpanrent hinzufügen, sodass von --width ganz nach rechts Seite der Grafik Keine Farbfüllung mehr. 🎜🎜Aber es sieht nicht aus wie ein Seil, lassen Sie die rote Linie verlaufen: 🎜

/* 先给最外层加个相对定位，后面的绝对定位都相对这一层 */
.chinese-knot {
  width: var(--grid-width);
  height: var(--grid-width);
  position: relative;
}
.ring-small {
  i {
    position: absolute;
    top: calc(var(--width) * -1.5);
    left: calc(var(--width) * 3);
  }
}

🎜

🎜🎜Auf diese Weise erhalten Sie ein Seil mit einem kleinen dreidimensionalen Effekt. Aber wie kann man dafür sorgen, dass es sich horizontal 11 mal mit einem Intervall von 0,5 mal --width wiederholt? Schauen Sie sich den Code unten an: 🎜

.ring-small {
  i {
    &:before,
    &:after {
      content: "";
      position: absolute;
      bottom: calc(var(--width) * -0.5 + 1px);
      width: var(--width);
      height: calc(var(--width) * 0.5);
      background: var(--bg-line);
    }
    &:after {
      right: 0;
    }
  }
}

🎜 Lassen Sie uns den Fehler finden: Was ist der Unterschied zwischen diesem Code und dem vorherigen? Diejenigen unter Ihnen mit scharfen Augen haben vielleicht bemerkt, dass es diese zusätzliche Zeile gibt: 🎜


  <div class="grid"></div>
  
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>

🎜Mit / als Trennlinie lautet die Bedeutung auf der linken Seite background-positoin, und die Bedeutung auf der rechten Seite ist background-size. 🎜🎜0 0 ist die obere linke Ecke. calc(var(--width) * 1.5) calc(var(--width) * 1.5) ist ein Quadrat mit einer Breite von 1,5 mal der Seilbreite. 🎜🎜 1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

🎜🎜Dies Ein kleines Quadrat, das vertikal und horizontal wiederholt wird, liefert uns das gewünschte Ergebnis: 🎜🎜 1Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

🎜🎜Aber was wir wollen, ist ein Gitter, und jetzt ist es bestenfalls nur noch ein Gitter. 🎜🎜Dann verwenden Sie die Pseudoklasse, um eine Kopie zu erstellen und 90 Grad zu drehen: 🎜

.ring-small {
  i {
    position: absolute;
    width: calc(var(--width) * 2.5);
    height: calc(var(--width) * 1.5);
    background: radial-gradient(
        circle at 50% 100%, 
        transparent calc(var(--width) * 0.25), 
        var(--red-3) calc(var(--width) * 0.25), 
        var(--red-2) calc(var(--width) * (0.25 + 0.25)),
        var(--red-1) calc(var(--width) * (0.25 + 0.45)), 
        var(--red-1) calc(var(--width) * (0.25 + 0.55)), 
        var(--red-2) calc(var(--width) * (0.25 + 0.75)),
        var(--red-3) calc(var(--width) * (0.25 + 1)), 
        transparent calc(var(--width) * (0.25 + 1))
    );
    &:before,
    &:after {
      content: "";
      position: absolute;
      bottom: calc(var(--width) * -0.5 + 1px);
      width: var(--width);
      height: calc(var(--width) * 0.5);
      background: var(--bg-line);
    }
    &:after {
      right: 0;
    }
    &:nth-child(-n + 4) {
      top: calc(var(--width) * -2 + 2px);
    }
    &:nth-child(1) {
      left: calc(var(--width) * 3);
    }
    &:nth-child(2) {
      left: calc(var(--width) * 6);
    }
    &:nth-child(3) {
      left: calc(var(--width) * 9);
    }
    &:nth-child(4) {
      left: calc(var(--width) * 12);
    }
    &:nth-child(-n + 8):nth-child(n + 5) {
      bottom: calc(var(--width) * -2 + 2px);
      transform: rotate(180deg);
    }
    &:nth-child(5) {
      left: calc(var(--width) * 1.5);
    }
    &:nth-child(6) {
      left: calc(var(--width) * 4.5);
    }
    &:nth-child(7) {
      left: calc(var(--width) * 7.5);
    }
    &:nth-child(8) {
      left: calc(var(--width) * 10.5);
    }
    &:nth-child(-n + 12):nth-child(n + 9) {
      left: calc(var(--width) * -2.5 + 2px);
      transform: rotate(-90deg);
    }
    &:nth-child(9) {
      top: calc(var(--width) * 3.5);
    }
    &:nth-child(10) {
      top: calc(var(--width) * 6.5);
    }
    &:nth-child(11) {
      top: calc(var(--width) * 9.5);
    }
    &:nth-child(12) {
      top: calc(var(--width) * 12.5);
    }
    &:nth-child(-n + 16):nth-child(n + 13) {
      right: calc(var(--width) * -2.5 + 2px);
      transform: rotate(90deg);
    }
    &:nth-child(13) {
      top: calc(var(--width) * 2);
    }
    &:nth-child(14) {
      top: calc(var(--width) * 5);
    }
    &:nth-child(15) {
      top: calc(var(--width) * 8);
    }
    &:nth-child(16) {
      top: calc(var(--width) * 11);
    }
  }
}

🎜🎜🎜🎜Vergleichen Sie das Referenzbild: 🎜🎜🎜🎜

不能说完全不相干，但是人家一看就经过了能工巧匠的编织，咱们这只能算简单的叠加，怎么才能让上面变成下面呢？

经过仔细的观察，发现只要把上面一层横着的线，稍加一些遮挡就能实现交叉编织的效果。用哪个css属性实现呢？那就只有mask 了。

下图蓝色框是需要遮挡的部分，绿色框是需要重复的部分。

2Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

仔细分析一下绿框的构成：

2Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

本质上是在一个3×3的正方形上挖两个1×1的小洞，位置分别是0 0 和 1.5 1.5。我们要如何画这样一张图？并把这张图应用到mask上呢？

mask是通过传入的图片进行遮罩处理，而背景图除了传入一张png以外，CSS还内置了几个生成背景图的函数:

linear-gradient：线性渐变
repeating-linear-gradient：重复线性渐变
radial-gradient：径向渐变
conic-gradient：圆锥渐变

这些函数都可以和mask配合。这里我们使用conic-gradient实现上面的图形。

用conic-gradient 实现上图，思路要反着来：不是在方形上挖孔，而是用多个矩形将要渲染的部分填充颜色，剩下的部分自然就是透明的：

2Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

CSS实现如下：

:root{
    ...
    --conic: #000 0 90deg, transparent 0 100%;
}

.grid {
  ...
  &:after {
    ...
    -webkit-mask: conic-gradient(from 0deg at var(--width) calc(var(--width) * 1.5), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 90deg at calc(var(--width) * 2.5) 0, var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 180deg at calc(var(--width) * 1.5) var(--width), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 90deg at 0 calc(var(--width) * 2.5), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3);
  }
}

预览效果

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

目前为止完整代码

:root{
  --width: 1.7vh;
  --red-1: #f40001;
  --red-2: #d40000;
  --red-3: #8c0703;
  --rope: 
    var(--red-3), 
    var(--red-2) calc(var(--width) * 0.25), 
    var(--red-1) calc(var(--width) * 0.45), 
    var(--red-1) calc(var(--width) * 0.55), 
    var(--red-2) calc(var(--width) * 0.75), 
    var(--red-3) var(--width);
  --grid-width: calc(var(--width) * 16);
  --bg-line: linear-gradient(90deg, var(--rope), transparent var(--width)) 0 0 / calc(var(--width) * 1.5) calc(var(--width) * 1.5);
  --conic: #000 0 90deg, transparent 0 100%;
}
body{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1d1e22;
  overflow: hidden;
}
.grid {
  width: var(--grid-width);
  height: var(--grid-width);
  background: var(--bg-line);
  &:after {
    content: "";
    display: block;
    width: var(--grid-width);
    height: var(--grid-width);
    background: var(--bg-line);
    transform: rotate(90deg);
    -webkit-mask: conic-gradient(from 0deg at var(--width) calc(var(--width) * 1.5), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 90deg at calc(var(--width) * 2.5) 0, var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 180deg at calc(var(--width) * 1.5) var(--width), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3),
      conic-gradient(from 90deg at 0 calc(var(--width) * 2.5), var(--conic)) 0 0 / calc(var(--width) * 3) calc(var(--width) * 3);
  }
}

<div class="grid"></div>

没错，这个图形，只用了.grid这一个标签！

但是只有网格还不够，让我们继续。

2. 半圆环

回头看一下参考图：

2Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

嗯，环形渐变，那就是radial-gradient了：

  <div class="ring-small">
    <i></i>
  </div>

.ring-small {
  i {
    position: absolute;
    width: calc(var(--width) * 2.5);
    height: calc(var(--width) * 1.5);
    background: radial-gradient(
        circle at 50% 100%, 
        transparent calc(var(--width) * 0.25), 
        var(--red-3) calc(var(--width) * 0.25), 
        var(--red-2) calc(var(--width) * (0.25 + 0.25)),
        var(--red-1) calc(var(--width) * (0.25 + 0.45)), 
        var(--red-1) calc(var(--width) * (0.25 + 0.55)), 
        var(--red-2) calc(var(--width) * (0.25 + 0.75)),
        var(--red-3) calc(var(--width) * (0.25 + 1)), 
        transparent calc(var(--width) * (0.25 + 1))
    );
  }
}

2Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

这样就得到了半个环形图，让我们使用定位把它和网格结合看看

/* 先给最外层加个相对定位，后面的绝对定位都相对这一层 */
.chinese-knot {
  width: var(--grid-width);
  height: var(--grid-width);
  position: relative;
}
.ring-small {
  i {
    position: absolute;
    top: calc(var(--width) * -1.5);
    left: calc(var(--width) * 3);
  }
}

2Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

对比素材图，发现环形不是直接紧贴在网格上的，而是先延伸了一小段直线，再接的曲线。那我们就给它增个高吧：

.ring-small {
  i {
    &:before,
    &:after {
      content: "";
      position: absolute;
      bottom: calc(var(--width) * -0.5 + 1px);
      width: var(--width);
      height: calc(var(--width) * 0.5);
      background: var(--bg-line);
    }
    &:after {
      right: 0;
    }
  }
}

上面使用两个伪类，为半圆环加了两截高度为 0.5 倍 --width的增高垫，效果如下图

2Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

接着复制16个这样的图形，分别定位到各自的位置上：


  <div class="grid"></div>
  
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>

.ring-small {
  i {
    position: absolute;
    width: calc(var(--width) * 2.5);
    height: calc(var(--width) * 1.5);
    background: radial-gradient(
        circle at 50% 100%, 
        transparent calc(var(--width) * 0.25), 
        var(--red-3) calc(var(--width) * 0.25), 
        var(--red-2) calc(var(--width) * (0.25 + 0.25)),
        var(--red-1) calc(var(--width) * (0.25 + 0.45)), 
        var(--red-1) calc(var(--width) * (0.25 + 0.55)), 
        var(--red-2) calc(var(--width) * (0.25 + 0.75)),
        var(--red-3) calc(var(--width) * (0.25 + 1)), 
        transparent calc(var(--width) * (0.25 + 1))
    );
    &:before,
    &:after {
      content: "";
      position: absolute;
      bottom: calc(var(--width) * -0.5 + 1px);
      width: var(--width);
      height: calc(var(--width) * 0.5);
      background: var(--bg-line);
    }
    &:after {
      right: 0;
    }
    &:nth-child(-n + 4) {
      top: calc(var(--width) * -2 + 2px);
    }
    &:nth-child(1) {
      left: calc(var(--width) * 3);
    }
    &:nth-child(2) {
      left: calc(var(--width) * 6);
    }
    &:nth-child(3) {
      left: calc(var(--width) * 9);
    }
    &:nth-child(4) {
      left: calc(var(--width) * 12);
    }
    &:nth-child(-n + 8):nth-child(n + 5) {
      bottom: calc(var(--width) * -2 + 2px);
      transform: rotate(180deg);
    }
    &:nth-child(5) {
      left: calc(var(--width) * 1.5);
    }
    &:nth-child(6) {
      left: calc(var(--width) * 4.5);
    }
    &:nth-child(7) {
      left: calc(var(--width) * 7.5);
    }
    &:nth-child(8) {
      left: calc(var(--width) * 10.5);
    }
    &:nth-child(-n + 12):nth-child(n + 9) {
      left: calc(var(--width) * -2.5 + 2px);
      transform: rotate(-90deg);
    }
    &:nth-child(9) {
      top: calc(var(--width) * 3.5);
    }
    &:nth-child(10) {
      top: calc(var(--width) * 6.5);
    }
    &:nth-child(11) {
      top: calc(var(--width) * 9.5);
    }
    &:nth-child(12) {
      top: calc(var(--width) * 12.5);
    }
    &:nth-child(-n + 16):nth-child(n + 13) {
      right: calc(var(--width) * -2.5 + 2px);
      transform: rotate(90deg);
    }
    &:nth-child(13) {
      top: calc(var(--width) * 2);
    }
    &:nth-child(14) {
      top: calc(var(--width) * 5);
    }
    &:nth-child(15) {
      top: calc(var(--width) * 8);
    }
    &:nth-child(16) {
      top: calc(var(--width) * 11);
    }
  }
}

就得到了这样的效果

2Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

哈哈，很像下水管道~

3. 四分之三圆环

还是先看素材：

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

嗯，不得不怀疑网易云的 LOGO 的灵感是不是就是中国结。

30-Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

单个环形已经实现了，两个环也不难吧：

<div class="ring-big">
    <i><b></b></i>
</div>

.ring-big {
  i {
    position: absolute;
    width: calc(var(--width) * 6);
    height: calc(var(--width) * 6);
    b {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(
        circle at 50% 50%,
        transparent calc(var(--width) * 0.5),
        var(--red-3) calc(var(--width) * 0.5),
        var(--red-2) calc(var(--width) * (0.5 + 0.25)),
        var(--red-1) calc(var(--width) * (0.5 + 0.45)),
        var(--red-1) calc(var(--width) * (0.5 + 0.55)),
        var(--red-2) calc(var(--width) * (0.5 + 0.75)),
        var(--red-3) calc(var(--width) * (0.5 + 1)),
        transparent calc(var(--width) * (0.5 + 1)),
        transparent calc(var(--width) * 2),
        var(--red-3) calc(var(--width) * 2),
        var(--red-2) calc(var(--width) * (2 + 0.25)),
        var(--red-1) calc(var(--width) * (2 + 0.45)),
        var(--red-1) calc(var(--width) * (2 + 0.55)),
        var(--red-2) calc(var(--width) * (2 + 0.75)),
        var(--red-3) calc(var(--width) * (2 + 1)),
        transparent calc(var(--width) * (2 + 1))
      );
    }
  }
}

3Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

为什么  标签里要再套一个标签呢，因为接下来我们要执行 clip-path，还要给圆环增高，而clip-path 会给增高的部分也裁剪掉，所以只能再套一层，让内层的  自己 clip，增高则使用  的伪类实现。下面就是将圆环右下角 1/4 裁剪掉并且加一个增高垫的代码：

.ring-big {
  i {
    ...
    b {
      ...
      clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%);
    }
    &:before,
    &:after {
      content: "";
      position: absolute;
      top: calc(var(--width) * 3 - 1px);
      left: calc(var(--width) * 3.5);
      width: calc(var(--width) * 2.5);
      height: calc(var(--width) * 0.5 + 2px);
      background: repeating-linear-gradient(
        90deg, 
        var(--red-3), 
        var(--red-2) calc(var(--width) * 0.25), 
        var(--red-1) calc(var(--width) * 0.45), 
        var(--red-1) calc(var(--width) * 0.55), 
        var(--red-2) calc(var(--width) * 0.75), 
        var(--red-3) var(--width), 
        transparent var(--width), 
        transparent calc(var(--width) * 1.5)
      );
    }
    &:after {
      transform: rotate(90deg);
      transform-origin: left top;
      top: calc(var(--width) * 3.5);
      left: calc(var(--width) * 3.5 + 1px);
    }
  }
}

3Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

复制一份并定位：

.ring-big {
  i {
    ...
    &:nth-child(1) {
      left: calc(var(--width) * -3.5);
      top: calc(var(--width) * -3.5);
    }
    &:nth-child(2) {
      left: auto;
      top: auto;
      right: calc(var(--width) * -3.5);
      bottom: calc(var(--width) * -3.5);
      transform: rotate(180deg);
    }
  }
}

3Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

到这里，工作的一半就已经完成了~继续

4. 十字结

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

这个图形，相对于上面几个，已经没什么难度了，五个1×1 的正方形，中间的渐变方向和周围四个垂直。

中间的正方形，用父级本身实现，里面周围四个，用四个子标签实现：

<div class="cross-node">
    <div class="node">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
    <div class="node">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </div>

.cross-node {
  .node {
    position: absolute;
    z-index: 2;
    width: var(--width);
    height: var(--width);
    background: var(--bg-line);
    i {
      position: absolute;
      width: var(--width);
      height: var(--width);
      background: var(--bg-line);
      transform: rotate(90deg);
      &:nth-child(1) {
        left: calc(var(--width) * -1);
      }
      &:nth-child(2) {
        left: var(--width);
      }
      &:nth-child(3) {
        top: calc(var(--width) * -1);
      }
      &:nth-child(4) {
        top: var(--width);
      }
    }
    &:nth-child(1) {
      right: calc(var(--width) * -1);
      top: calc(var(--width) * -1);
    }
    &:nth-child(2) {
      left: calc(var(--width) * -1);
      bottom: calc(var(--width) * -1);
    }
  }
}

3Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

5. 挂绳

前面我们都是让中国结处于一个斜躺的姿态，写头部和尾部之前，让我们先把它摆正：

.chinese-knot {
  ...
  transform: rotate(-45deg) translate(calc(var(--width) * 4), calc(var(--width) * -4));
}

3Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

回头看素材图：

3Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

先确定一下html结构：

<div class="header">
    <i></i>
    <b></b>
    <span></span>
</div>

i 是上面的吊绳，b 是圆环，span 是衔接处的短绳，带点黄色装饰。为了方便调整定位，我们从下往上实现，先写短绳：

:root {
  --yellow-1: #fced00;
  --yellow-2: #f28a00;
  --yellow-3: #da571b;
  --bg-yellow: linear-gradient(
    90deg,
    var(--yellow-3),
    var(--yellow-2) 20%,
    var(--yellow-1) 40%,
    var(--yellow-1) 60%,
    var(--yellow-2) 80%,
    var(--yellow-3) 100%
  );
}
.header {
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(45deg);
  i {
    position: absolute;
    bottom: calc(var(--width) * 1);
    left: calc(var(--width) * -0.5);
    width: calc(var(--width) * 1);
    height: calc(var(--width) * 2);
    background: var(--bg-line);
    &:before {
      content: "";
      display: block;
      height: calc(var(--width) * 0.5);
      background: var(--bg-yellow);
    }
  }
}

然后是圆环：

.header {
  ...
  b {
    position: absolute;
    bottom: calc(var(--width) * 3);
    left: calc(var(--width) * -1.5);
    width: calc(var(--width) * 3);
    height: calc(var(--width) * 3);
    background: radial-gradient(
      circle at 50%,
      transparent calc(var(--width) * 0.75),
      var(--red-3) calc(var(--width) * 0.75),
      var(--red-2) calc(var(--width) * (0.75 + 0.15)),
      var(--red-1) calc(var(--width) * (0.75 + 0.3)),
      var(--red-1) calc(var(--width) * (0.75 + 0.45)),
      var(--red-2) calc(var(--width) * (0.75 + 0.6)),
      var(--red-3) calc(var(--width) * (0.75 + 0.75)),
      transparent calc(var(--width) * (0.75 + 0.75))
    );
  }
}

最后是长的吊绳：

.header {
  ...
  span {
    position: absolute;
    bottom: calc(var(--width) * 5);
    left: calc(var(--width) * -0.25);
    width: calc(var(--width) * 0.5);
    height: calc(var(--width) * 30);
    background: linear-gradient(90deg, var(--red-2), var(--red-1) 20%, var(--red-2) 70%, var(--red-3));
    border-radius: calc(var(--width) * 0.25);
  }
}

单独效果

3Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

整体效果

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

6. 流苏

4Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

确定html结构：

<div class="footer">
    <b></b>
    <b></b>
    <div class="tassels">
      <i></i>
      <i></i>
    </div>
</div>

可以看到，流苏部分，有两个弯曲的 1/8 环，我们用两个b 标签来表示。这个形状依然还是先画一个完整的环，然后裁剪来实现：

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  b {
    position: absolute;
    width: calc(var(--width) * 15);
    height: calc(var(--width) * 15);
    background: radial-gradient(
      circle at 50%,
      transparent calc(var(--width) * 6.5),
      var(--red-3) calc(var(--width) * 6.5),
      var(--red-2) calc(var(--width) * (6.5 + 0.25)),
      var(--red-1) calc(var(--width) * (6.5 + 0.45)),
      var(--red-1) calc(var(--width) * (6.5 + 0.55)),
      var(--red-2) calc(var(--width) * (6.5 + 0.75)),
      var(--red-3) calc(var(--width) * (6.5 + 1)),
      transparent calc(var(--width) * (6.5 + 1))
    );
  }
}

4Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

加上裁剪并定位：

.footer {
  ...
  b {
    ...
    &:nth-child(1) {
      left: calc(var(--width) * -8.5);
      top: calc(var(--width) * 1);
      clip-path: polygon(50% 0, 50% 50%, 10% 0);
    }
    &:nth-child(2) {
      left: calc(var(--width) * -16);
      top: calc(var(--width) * -6.5);
      clip-path: polygon(100% 50%, 50% 50%, 100% 90%);
    }
  }
}

4Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

两个小尾巴就实现了。

最后是流苏。先画一下背景上的垂直细线，这里我们用 repeating-linear-gradient 实现，每隔 2px 画一条 1px 宽的透明度为 0.2 的黑线：

.footer {
  .tassels {
    i {
      position: absolute;
      width: calc(var(--width) * 2.5);
      height: calc(var(--width) * 14);
      background: var(--red-2) repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 3px) 50% 50% / 3px 1px;}
  }
}

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

再蒙上一层黄色的装饰：

.footer {
  .tassels {
    i {
      ...
      &:before {
        content: "";
        position: absolute;
        top: calc(var(--width) * 0.5);
        width: 100%;
        height: calc(var(--width) * 3.6);
        background: var(--bg-yellow);
        clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%, 0 15%, 100% 15%, 100% 85%, 0 85%, 0 90%, 100% 90%, 100% 100%, 0 100%, 0 0);
      }
  }
}

4Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

上面代码中使用 clip-path 对黄色背景裁剪，露出两条红线，裁剪路径可以用下图表示：

4Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

最终效果：

4Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

三、加点动画

本来到这里就应该结束了。但是我想让这个中国结有点实际用途，比如加点交互什么的。

红包也是春节的习俗之一，那就加一个拉一下中国结掉落红包雨的特效吧~

1. 拉一下

给中国结在:active状态下加个位移即可实现：

.chinese-knot {
  width: var(--grid-width);
  height: var(--grid-width);
  position: relative;
  transform: rotate(-45deg) translate(calc(var(--width) * 4), calc(var(--width) * -4));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.5s;
  &:active {
    transform: rotate(-45deg) translate(calc(var(--width) * 2), calc(var(--width) * -2));
  }
}

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

2. 画个红包

先搜索一个红包素材：

4Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

观察一下红包结构，深红背景，浅红弧形开口，加一个黄色圆形封口，上面写着一个繁体的开字。

我们可以先确定 html 结构。.rain 作为外层，代表整个红包雨，一个i标签代表一个红包：

<div class="rain">
  <i></i>
</div>

一个标签怎么实现上面提到的三种元素呢？看代码：

.rain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  i {
    position: relative;
    display: block;
    width: calc(var(--width) * 5);
    height: calc(var(--width) * 8);
    background: var(--red-3);
    border-radius: calc(var(--width) * 0.4);
    overflow: hidden;
    box-shadow: 0 calc(var(--width) * 1) calc(var(--width) * 1) rgba(0, 0, 0, 0.3);
    &:before {
      content: "";
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(var(--width) * 8);
      height: calc(var(--width) * 8);
      background: var(--red-1);
      opacity: 0.5;
      border-radius: 50%;
    }
    &:after {
      content: "開";
      position: absolute;
      left: 50%;
      transform: translate(-50%, 140%);
      width: calc(var(--width) * 2);
      height: calc(var(--width) * 2);
      background: var(--yellow-2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-style: normal;
      font-size: calc(var(--width) * 0.5);
      color: var(--yellow-1);
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    }
  }
}

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

使用i标签自身实现红包主体，:before 伪类实现弧形的开口，:after 伪类实现黄色圆形封口，在content中写上開字。

一个红包完成了，再复制 9 个：

<div class="rain">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>

5Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

这样就得到了 10 个固定在顶部，并且整齐排列的红包了。

3. 红包雨动画

下雨嘛，从上往下运动就好了：

.rain {
  ...
  i {
    ...
    animation: fall 3s ease-in infinite;
  }
}
@keyframes fall {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 100vh);
  }
}

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

聪明的你估计已经猜到了这样的结果：谁家的雨是这样齐刷刷的下来的？

那我们就红包的垂直位置错落一点，使用 sass 的 random 函数来实现随机：

.rain {
  ...
  i {
    ...
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        top: random(60) + vh;
      }
    }
  }
}

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

额，效果怎么和想象的不一样。依旧还是齐刷刷下落，只不过是"错落"的齐刷刷。

那我们让每个红包的开始时间也随机不就行了嘛：

.rain {
  ...
  i {
    ...
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        top: random(60) + vh;
        animation-delay: random(30) * 0.1s;
      }
    }
  }
}

5Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

嗯，好了一点点。但是有一个问题，屏幕上的雨点，有时候很多，有时候很少，不够均匀。那我们把动画的持续时间也随机会怎么样呢？

.rain {
  ...
  i {
    ...
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        top: random(60) + vh;
        animation-delay: random(30) * 0.1s;
        animation-duration: random(10) * 0.1s + 2s; /* 2s ~ 3s 之间随机 */
      }
    }
  }
}

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

终于更像雨了~

但是现在雨滴是凭空出现的，很生硬，我们只要把开始的位置挪到负一屏，然后让它下落到正二屏就行了：

.rain {
  ...
  top: -100vh;
}
@keyframes fall {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 200vh);
  }
}

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

这样就有了源源不断下落的效果。

4. 拉一下触发红包雨

CSS 不是 JS ，怎么触发点击事件呢？

我们就要运用 CSS 本身的特性了，checkbox 复选框有个选中状态 :checked，而复选框可以用点击切换这个状态，再使用 CSS 的兄弟选择器 element ~ element 即可实现点击添加样式的效果。

样式可以触发了，那如何触发动画呢？

animation 属性添加到元素上后，播放状态默认是 running ，我们需要先把初始播放状态改为 paused （暂停）, 然后通过上面的方法，把元素的播放状态改回 running 来实现播放动画的效果：

<input type="checkbox" id="switch">
<label class="chinese-knot" for="switch">...</label>
<div class="rain">...</div>

.rain {
  ...
  i {
    ...
    animation: fall 3s ease-in infinite;
    /* 默认不播放动画 */
    animation-play-state: paused;
  }
}

#switch {
  visibility: hidden;
  pointer-events: none;
}
/* checkbox 选中时播放动画 */
#switch:checked ~ .rain i {
  animation-play-state: running;
}
/* 点击时重置动画，否则取消checkbox选中状态，动画会中止并停留在当前位置 */
.chinese-knot:active ~ .rain i {
  animation: none;
}

上面的 html 中，我们让.chinese-knot 从 div 改为 label 来指向 checkbox，方法是 label 的 for 和 checkbox 的 id 设为相同的值。

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

效果很不错，我们再给红包雨下落时加个背景，以提醒用户当前的状态。并且下红包雨时，调低中国结的透明度，以突出红包的存在感。

<input type="checkbox" id="switch">
<div class="bg"></div>
<label class="chinese-knot" for="switch">...</label>
<div class="rain">...</div>

.bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(0deg, #171a4b, #96367f);
  opacity: 0;
  transition: all 0.5s;
}
#switch:checked ~ .bg {
  opacity: 1;
}
#switch:checked ~ .chinese-knot {
  opacity: 0.2;
  &:hover {
    opacity: 0.5;
  }
}

Ich führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!

完结撒花~~~

总结

这篇文章整理了我从搜集素材开始，创作一个作品的全部过程，代码写了一天，这篇文章写了半天。希望能让 CSS 初学者对 CSS 燃起兴趣，也希望让接触了一段时间 CSS 的朋友获得一些灵感和帮助。

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonIch führe Sie Schritt für Schritt durch das Zeichnen eines chinesischen Knotens mit reinem CSS und füge Animationseffekte hinzu!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css scss html sass for checkbox 接口 var JS 事件选择器伪类 background animation https

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Eingehende Analyse benutzerdefinierter CSS-Reset-StileNächster Artikel：Eingehende Analyse benutzerdefinierter CSS-Reset-Stile

In Verbindung stehende Artikel

Mehr sehen