सीएसएस त्रिकोणमिति के साथ अनंत कक्षा एनीमेशन

1609 zegarkidawida

संपादक में खोलें अपना कोड प्रकाशित करें

सीएसएस त्रिकोणमिति के साथ अनंत कक्षा एनीमेशन

अनुशंसित

11 August 2025

P5.js और CSS के साथ HTML टेम्पलेट

27 September 2025

आकृतियों और पाठ के साथ CSS एनिमेटेड पृष्ठभूमि

4 January 2025

सीएसएस के साथ एक द्विघात लूप

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

अनुशंसित

P5.js और CSS के साथ HTML टेम्पलेट

आकृतियों और पाठ के साथ CSS एनिमेटेड पृष्ठभूमि

सीएसएस के साथ एक द्विघात लूप

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS