So erzielen Sie mit CSS den Effekt eines chinesischen Knotens (Code)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-09-07 13:54:26

Original

2624 Leute haben es durchsucht

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:

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

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

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

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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%;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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!