CSS -Olympische Ringe

Dieser Artikel besucht ein Projekt 2020: Animation 3D -Olympische Ringe. Der ursprüngliche SCSS -Code fehlte zwar nicht moderner Effizienz. Diese aktualisierte Version verwendet reine CSS, wodurch trigonometrische Funktionen und relative Farbsyntax für sauberere, prägnantere Code genutzt werden. Das Ergebnis ist eine leistungsfähigere und elegantere Lösung.

Der 3D -Effekt wird unter Verwendung von Layered Divs erreicht. Jeder Ring umfasst 16 Schichten, jeweils ein etwas anderer Schatten, um einen Beleuchtungseffekt zu erzielen. Die Größe und Positionierung der Schichten erzeugen die Illusion eines dreidimensionalen Rings.

HTML -Struktur

Die HTML besteht aus fünf <div> Elementen (jeweils pro Ring), die jeweils 16 verschachtelte <code><i></i> Elemente enthalten, die die Schichten darstellen. Jedes <i></i> Element verwendet eine benutzerdefinierte Eigenschaft --i (zwischen 1 und 16), um sein Styling über CSS zu steuern. Emmet kann das Erstellen der sich wiederholenden HTML -Struktur vereinfachen. Hier ist ein Ausschnitt:

<div class="rings">
  <div class="ring ring__1">
    <i style="--i: 1;"></i>
    <i style="--i: 2;"></i>
    <!-- ... more layers ... -->
    <i style="--i: 16;"></i>
  </div>
  <!-- ... more rings ... -->
</div>

Die --i Eigenschaft dient als Multiplikator in CSS -Berechnungen für Schichtposition, Größe und Farbe.

CSS Styling

Der Container .rings verwendet position: relative, um die absolut positionierten Ringe zu enthalten. Jedes .ring ist absolut positioniert und seine <i></i> Kinder erben eine absolute Positionierung. border-radius: 50% erstellt die kreisförmige Form. Eine benutzerdefinierte Eigenschaft --ringColor setzt die Grundfarbe.

Die auf einen negativen Wert festgelegte inset -Mobilie positioniert die Schichten außerhalb des .ring -Elements und definiert ihre Größe effektiv. Die mit --translateZ berechnete --i benutzerdefinierte Eigenschaft positioniert Schichten entlang der Z-Achse, um Tiefe zu erstellen:

.ring {
  position: absolute;
  --ringColor: #0085c7;
  i {
    position: absolute;
    inset: -100px;
    border-radius: 50%;
    --translateZ: calc(var(--i) * 2px);
    transform: rotateY(-45deg) translateZ(var(--translateZ));
  }
}

Schattierung mit relativer Farbsyntax

Schattierung wird unter Verwendung der relativen Farbsyntax erreicht. Eine aus --light berechnete 🎜> -Senformation ändert die Leichtigkeit von --i: --ringColor

i {
  --light: calc(var(--i) / 16);
  --layerColor: rgb(from var(--ringColor) calc(r * var(--light)) calc(g * var(--light)) calc(b * var(--light)));
  border: var(--size) var(--layerColor) solid;
  outline: var(--size) var(--layerColor) solid;
}

Dies verdunkelt die Schichten nach hinten dynamisch und verbessert den 3D -Effekt. Eine Umrisse wird hinzugefügt, um sicherzustellen, dass die Schattierung sowohl an den inneren als auch an den Außenkanten des Rings sichtbar ist.

formen und animation

Die mit der

-Funktion berechnete --size benutzerdefinierte Eigenschaft bestimmt die Randdicke und erzeugt die kreisförmige Form des Rings: sin()

i {
  --size: calc(sin(var(--i) * 11.25deg) * 16px);
  /* ... other styles ... */
}

Animation wird mit

und der @keyframes Eigenschaft implementiert. Die Animationsdauer jedes Rings wird durch eine benutzerdefinierte Eigenschaft animation kontrolliert, wobei eine negative Verzögerung die Animationen stolpert. --duration

Abschluss und Optimierung

Eine leichte X-Achse-Rotation am .rings -Container fügt die Perspektive hinzu. Pseudo-Elemente (::after) erzeugen verschwommene Schatten, wodurch der 3D-Effekt weiter verbessert wird. Das endgültige CSS ist hoch optimiert und wiederverwendbar, was die Kraft moderner CSS -Merkmale demonstriert. Der Code ist wesentlich effizienter und wartbarer als die ursprüngliche SCSS -Version.