Animación de órbita infinita con trigonometría CSS

2,481 zegarkidawida

Abrir en el editor Publica tu código

Animación de órbita infinita con trigonometría CSS

Recomendado

10 January 2025

Un código de Mikeykun

8 April 2026

Tabla HTML: Ejemplo de base de datos de personas

27 May 2026

Web Dash HTML: Modificación de Geometry Dash con Phaser

HTML

<section class="section">
    <div class="section-wrapper">
      <header class="header">
        <hgroup class="hgroup">
          <h2 class="headline">Meet Our Team!</h2>
          <p class="tagline">Creative minds shaping the future</p>
        </hgroup>
        <a href="#" class="section-link"> View All </a>
      </header>
      
      <ul class="cards" style="--nth-siblings: 5">
        <li class="card" style="--nth-child: 1">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-1.avif"
                width="144" height="144" alt="Ethan B., DevOps Engineer" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Ethan B.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">DevOps Engineer</p>
                <p class="team-bio">
                  Master of servers, pipelines, and keeping things running
                  smoothly.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 2">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-2.avif"
                width="144" height="144" alt="Ava L., UI/UX Designer" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Ava L.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">UI/UX Designer</p>
                <p class="team-bio">
                  Turning ideas into stunning designs, one pixel at a time.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 3">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-3.avif"
                width="144" height="144" alt="Liam J., Mobile Developer" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Liam J.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">Mobile Developer</p>
                <p class="team-bio">
                  Crafting sleek, intuitive apps for users on the go.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 4">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-4.avif"
                width="144" height="144" alt="Sophia K., Data Scientist" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Sophia K.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">Data Scientist</p>
                <p class="team-bio">
                  Decoding patterns and finding insights in the chaos.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 5">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-5.avif"
                width="144" height="144" alt="Codey X, AI Code Assistant" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Codey X</h3>
              <div class="team-content-wrapper">
                <p class="team-title">AI Code Assistant</p>
                <p class="team-bio">
                  Powered by algorithms, driven by collaboration.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 6">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-6.avif"
                width="144" height="144" alt="Maya R., Project Manager" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Maya R.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">Project Manager</p>
                <p class="team-bio">
                  Keeping the team in sync and deadlines on track.
                </p>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </section>

CSS

@layer reset, base, utilities, components, layout, overrides;

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --direction {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}

@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

:where(:not(dialog)) {
    margin: 0;
  }

:where(html) {
    -webkit-text-size-adjust: none;

@media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

:where(body) {
    min-block-size: 100svb;
    -webkit-font-smoothing: antialiased;
  }
}

@layer base {
  html {
    --surface-1: oklch(20% 0.03 269);
    --surface-2: oklch(26% 0.04 269);
    --text-1: oklch(91% 0.03 61);
    --body: 400 1rem/1.5rem system-ui, sans-serif;
    --display: 400 3.562rem/4rem system-ui, sans-serif;
    --display-small: 400 2.25rem/2.75rem system-ui, sans-serif;
    --label: 500 0.875rem/1.25rem system-ui, sans-serif;
    --title: 400 1.375rem/1.75rem system-ui, sans-serif;
    color-scheme: dark;
  }

body {
    background-color: var(--surface-1);
    color: var(--text-1);
    font: var(--body);
  }
}

@layer layout {
  .section {
    display: grid;
    max-inline-size: 100%;
    min-block-size: 100svb;
    overflow-x: clip;
    padding-block: 80px;
    place-items: center;
  }

.section-wrapper {
    display: grid;
    place-items: center;
  }

.header {
    display: grid;
    place-items: center;
    gap: 16px;
    z-index: 2;

/* lg-n-above */
    @media (width >=1024px) {
      /* Placing header and cards in the same grid cell to stack them */
      /* Both elements use grid-area: 1/1 to overlap within the same area */
      grid-area: 1/1;
    }
  }

.hgroup {
    display: grid;
    place-items: center;
    gap: 8px;
  }

.headline {
    font: var(--display-small);

/* lg-n-above */
    @media (width >=1200px) {
      font: var(--display);
    }
  }

.section-link {
    color: var(--text-1);
    text-decoration: underline;
    font: var(--label);

/* lg-n-below */
    @media (width < 1024px) {
      display: none;
    }
  }

.cards {
    list-style: none;
    padding: 0;

/* lg-n-below */
    @media (width < 1024px) {
      display: grid;
      grid-auto-flow: column;
      gap: 32px;
      max-inline-size: 100%;
      overflow-x: scroll;
      padding-block: 32px;
      padding-inline: 32px;
    }

/* lg-n-above */
    @media (width >=1024px) {
      --avatar-opacity: 1;
      --avatar-img-scale: 1;
      --tooltip-visibility: hidden;
      --tooltip-opacity: 0;
      --animation-state: running;

display: grid;
      /* Placing header and cards in the same grid cell to stack them */
      /* Both elements use grid-area: 1/1 to overlap within the same area */
      grid-area: 1/1;
      min-block-size: 700px;
      place-items: center;

&:has(.avatar-link-wrapper:is(:hover, :focus-visible, :active)) {
        --animation-state: paused;
        /* Reduces opacity of non-hovered avatars to create a layered effect */
        --avatar-opacity: 0.4;
      }
    }
  }

.card {
    padding: 0;

/* lg-n-above */
    @media (width >=1024px) {
      --radius: min(620px, 40cqi);
      --offset-per-child: calc(360deg / (var(--nth-siblings) + 1));
      --angle-offset: calc(var(--nth-child) * var(--offset-per-child));
      --inline-ratio: 1/1;
      /* Keeps the horizontal scaling unchanged */
      --block-ratio: 1/2;
      /* Reduces vertical scaling, making it an oval */

/* Adjusts tooltip direction based on avatar position */
      /* Future improvement: Replace with the sign() CSS function when it becomes widely supported */
      /* Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/sign */
      --direction: min(max(calc(cos((var(--angle) + var(--angle-offset))) * -100), -1), 1);

/* Stack all cards in the same grid cell */
      grid-area: 1/1;

/* Based on Bramus' article, modified with inline/block ratios to create an oval shape */
      /* Source: https://web.dev/articles/css-trig-functions */

translate: calc(cos((var(--angle) + var(--angle-offset))) * var(--radius) * var(--inline-ratio))
        calc(sin((var(--angle) + var(--angle-offset))) * var(--radius) * var(--block-ratio) * -1);

animation: adjust-angle linear 40s infinite reverse var(--animation-state);
    }
  }

/* Continuously rotates the avatars in a circular motion */
  @keyframes adjust-angle {
    to {
      --angle: 360deg;
    }
  }

.avatar-link-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-1);

&:is(:hover, :focus-visible, :active) {
      --avatar-img-scale: 1.1;
      --avatar-opacity: 1;
      --tooltip-opacity: 1;
      --tooltip-visibility: visible;
    }

/* lg-n-below */
    @media (width < 1024px) {
      flex-direction: column;
      gap: 16px;
    }
  }

.visual {
    aspect-ratio: 1;
    border-radius: 1rem;
    box-shadow: 0 2px 4px 0 oklch(0 0 0 / 10%);
    inline-size: 240px;
    opacity: var(--avatar-opacity);
    overflow: clip;
    transition: opacity 0.3s ease;

/* lg-n-above */
    @media (width >=1024px) {
      inline-size: 144px;
      border-radius: 1e5px;
    }
  }

.avatar-img {
    background-color: var(--surface-2);
    block-size: 100%;
    display: block;
    inline-size: 100%;
    object-fit: cover;
    scale: var(--avatar-img-scale, 1);
    transition: scale 0.3s ease;
  }

.tooltiptext {
    display: grid;
    gap: 4px;

/* lg-n-above */
    @media (width >=1024px) {
      position: absolute;
      /* Adjusts tooltip placement based on avatar position */
      /* Moves the tooltip to the left or right depending on the avatar's location */
      /* --direction is either 1 (right) or -1 (left) */
      max-inline-size: 20ch;
      opacity: var(--tooltip-opacity);
      transition-duration: 0.3s;
      transition-property: opacity, visibility;
      transition-timing-function: ease;
      translate: 110% 0;
      visibility: var(--tooltip-visibility);

/* make the tooltips non-interactive */
      pointer-events: none;
      user-select: none;

/* Adjusts text alignment based on avatar position */
      /* Ensures the tooltip text aligns properly when shifted left or right */
      @container style(--direction: -1) {
        text-align: end;
        translate: -110% 0;
      }
    }
  }

.team-name {
    font: var(--title);
  }
}