So erzielen Sie mit CSS den Effekt eines chinesischen Knotens (Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS, um den Effekt des chinesischen Knotens (Code) zu erzielen. Ich hoffe, dass er für Sie hilfreich ist.

Heute möchte ich mit Ihnen ein Tutorial zum Zeichnen eines chinesischen Knotens mit CSS teilen.
Der Endeffekt ist wie folgt:

Zuerst definieren wir die Struktur, die zum Zeichnen eines chinesischen Knotens erforderlich ist:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Dann beginnen Sie mit dem Schreiben des Stils und lassen Sie den chinesischen Knoten in der Mitte anzeigen:

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Legen Sie den Containerstil des chinesischen Knotens fest:

.knot {
  box-sizing: border-box;
  font-size: 100px;
  width: 2em;
  height: 1.6em;
  background: skyblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

Ich habe den Grundstil des chinesischen Knotens aufgeteilt 4 Rechtecke. Definieren Sie zunächst den Grundstil des Rechtecks:

.box {
  position: absolute;
  box-sizing: border-box;
  width: 1em;
  height: 0.4em;
  border: var(--b) solid firebrick;
  --b: 0.1em;
}

Dann passen wir den Stil jedes Rechtecks ​​an und kombinieren sie zur Grundform des Knotens:

.knot .box:nth-child(1) {
  transform: rotate(45deg) translate(-15%, -38%);
  border-radius: 20% 0% 0% 20% / 50% 0 0 50%;
}

.knot .box:nth-child(2) {
  transform: rotate(45deg) translate(15%, 37%);
  border-radius: 0% 20% 20% 0% / 0% 50% 50% 0%;
}

.knot .box:nth-child(3) {
  transform: rotate(-45deg) translate(15%, -38%);
  border-radius: 0% 20% 20% 0% / 0% 50% 50% 0%;
}

.knot .box:nth-child(4) {
  transform: rotate(-45deg) translate(-15%, 37%);
  border-radius: 20% 0% 0% 20% / 50% 0 0 50%;
}

Schließlich verwenden wir die Pseudoelemente des ersten und zweiten Rechtecks, um den Rest zu zeichnen. Die beiden kleinen Kreise:

.knot .box:nth-child(1)::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  width: 0.4em;
  height: 0.4em;
  border: var(--b) solid firebrick;
  border-radius: 50% 50% 50% 0%;
  top: -0.4em;
  right: -0.4em;
}

.knot .box:nth-child(2)::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  width: 0.4em;
  height: 0.4em;
  border: var(--b) solid firebrick;
  border-radius: 50% 0% 50% 50%;
  top: 0.2em;
  right: 0.8em;
}

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um einen Animationseffekt von a zu erzielen Ringrotationsillusion (Quellcode beigefügt)

Wie man reines CSS verwendet, um das Bewegungsmodell von Sonne, Erde und Mond zu animieren

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS den Effekt eines chinesischen Knotens (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!