Anneaux olympiques du CSS

Cet article revisite un projet 2020: Animation des anneaux olympiques 3D. Le code SCSS d'origine, bien que fonctionnel, manquait d'efficacité moderne. Cette version mise à jour utilise Pure CSS, tirant parti des fonctions trigonométriques et une syntaxe couleur relative pour un code plus propre et plus concis. Le résultat est une solution plus performante et élégante.

L'effet 3D est obtenu en utilisant des div couches. Chaque anneau comprend 16 couches, chacune une teinte légèrement différente pour créer un effet d'éclairage. La taille et le positionnement des couches créent l'illusion d'un anneau tridimensionnel.

Structure HTML

Le HTML se compose de cinq éléments <div> (un par anneau), chacun contenant 16 éléments imbriqués <code><i></i> représentant les couches. Chaque élément <i></i> utilise une propriété personnalisée --i (allant de 1 à 16) pour contrôler son style via CSS. Emmet peut simplifier la création de la structure HTML répétitive. Voici un extrait:

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

La propriété --i sert de multiplicateur dans les calculs CSS pour la position, la taille et la couleur de la couche.

CSS Styling

Le conteneur .rings utilise position: relative pour contenir les anneaux absolument positionnés. Chaque .ring est absolument positionné, et ses enfants <i></i> héritent du positionnement absolu. border-radius: 50% crée la forme circulaire. Une propriété personnalisée --ringColor définit la couleur de base.

La propriété inset, définie sur une valeur négative, positionne les couches à l'extérieur de l'élément .ring, définissant efficacement sa taille. La propriété --translateZ personnalisée, calculée à l'aide de --i, positionne les couches le long de l'axe z pour créer une profondeur:

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

ombrage avec syntaxe de couleur relative

L'ombrage est réalisé en utilisant la syntaxe des couleurs relatives. Une propriété personnalisée --light, calculée à partir de --i, modifie la légèreté de --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;
}

Cela assombrit dynamiquement les couches vers l'arrière, améliorant l'effet 3D. Un contour est ajouté pour garantir que l'ombrage est visible sur les bords intérieurs et extérieurs de l'anneau.

Façon et animation

La propriété personnalisée --size, calculée à l'aide de la fonction sin(), détermine l'épaisseur de la bordure, créant la forme circulaire de l'anneau:

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

L'animation

est implémentée à l'aide de @keyframes et de la propriété animation. La durée de l'animation de chaque anneau est contrôlée par une propriété personnalisée --duration, avec un retard négatif pour échelonner les animations.

touches finales et optimisation

Une légère rotation de l'axe X sur le conteneur .rings ajoute de la perspective. Les pseudo-éléments (::after) créent des ombres floues, améliorant encore l'effet 3D. Le CSS final est hautement optimisé et réutilisable, démontrant la puissance des fonctionnalités CSS modernes. Le code est nettement plus efficace et maintenable que la version SCSS d'origine.