Linha do tempo da roda - CSS puro

Abrir no Editor Publique Seu Código

Recomendado

19 May 2025

<div class="cards-container">
        <ul class="cards" style="--items: 26;">
            <li style="--i: 0;">
                <input type="radio" id="item-0" name="gallery-item" checked>
                <label for="item-0">2000</label>
                <h2>2000</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 1;">
                <input type="radio" id="item-1" name="gallery-item">
                <label for="item-1">2001</label>
                <h2>2001</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 2;">
                <input type="radio" id="item-2" name="gallery-item">
                <label for="item-2">2002</label>
                <h2>2002</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 3;">
                <input type="radio" id="item-3" name="gallery-item">
                <label for="item-3">2003</label>
                <h2>2003</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 4;">
                <input type="radio" id="item-4" name="gallery-item">
                <label for="item-4">2004</label>
                <h2>2004</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 5;">
                <input type="radio" id="item-5" name="gallery-item">
                <label for="item-5">2005</label>
                <h2>2005</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 6;">
                <input type="radio" id="item-6" name="gallery-item">
                <label for="item-6">2006</label>
                <h2>2006</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 7;">
                <input type="radio" id="item-7" name="gallery-item">
                <label for="item-7">2007</label>
                <h2>2007</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 8;">
                <input type="radio" id="item-8" name="gallery-item">
                <label for="item-8">2008</label>
                <h2>2008</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 9;">
                <input type="radio" id="item-9" name="gallery-item">
                <label for="item-9">2009</label>
                <h2>2009</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 10;">
                <input type="radio" id="item-10" name="gallery-item">
                <label for="item-10">2010</label>
                <h2>2010</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 11;">
                <input type="radio" id="item-11" name="gallery-item">
                <label for="item-11">2011</label>
                <h2>2011</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 12;">
                <input type="radio" id="item-12" name="gallery-item">
                <label for="item-12">2012</label>
                <h2>2012</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 13;">
                <input type="radio" id="item-13" name="gallery-item">
                <label for="item-13">2013</label>
                <h2>2013</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 14;">
                <input type="radio" id="item-14" name="gallery-item">
                <label for="item-14">2014</label>
                <h2>2014</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 15;">
                <input type="radio" id="item-15" name="gallery-item">
                <label for="item-15">2015</label>
                <h2>2015</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 16;">
                <input type="radio" id="item-16" name="gallery-item">
                <label for="item-16">2016</label>
                <h2>2016</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 17;">
                <input type="radio" id="item-17" name="gallery-item">
                <label for="item-17">2017</label>
                <h2>2017</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 18;">
                <input type="radio" id="item-18" name="gallery-item">
                <label for="item-18">2018</label>
                <h2>2018</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 19;">
                <input type="radio" id="item-19" name="gallery-item">
                <label for="item-19">2019</label>
                <h2>2019</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 20;">
                <input type="radio" id="item-20" name="gallery-item">
                <label for="item-20">2020</label>
                <h2>2020</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 21;">
                <input type="radio" id="item-21" name="gallery-item">
                <label for="item-21">2021</label>
                <h2>2021</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 22;">
                <input type="radio" id="item-22" name="gallery-item">
                <label for="item-22">2022</label>
                <h2>2022</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 23;">
                <input type="radio" id="item-23" name="gallery-item">
                <label for="item-23">2023</label>
                <h2>2023</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 24;">
                <input type="radio" id="item-24" name="gallery-item">
                <label for="item-24">2024</label>
                <h2>2024</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 25;">
                <input type="radio" id="item-25" name="gallery-item">
                <label for="item-25">2025</label>
                <h2>2025</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
        </ul>
  </div>

CSS

@import "https://codepen.io/cbolson/pen/rNEdgKo.css" layer(template);
@layer template, demo;

@layer demo {
  /* Hide radio buttons */
  input[type="radio"] {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
  }
  .cards-container {
    --base-rotation: 0deg;
    --full-circle: 360deg;
    --radius: 40vw;
    --duration: 200ms;

--cards-container-size: calc(var(--radius) * 2);
    --cards-container-padding: 2rem;

--border-color: transparent;

--label-offset: calc(var(--radius) * -1 - 1rem);
    --label-size: 30px;
    --label-color: #666;
    --label-color-hover: steelblue;
    --label-line-h: 0;
    --label-line-h-current: 2rem;
    --label-dot-size: 10px;

--title-top: 1.5rem;
    --title-offset-y: 30px;

--info-top: 5rem;
    --info-width: 80%;
    --info-offset-y: 30px;

box-sizing: content-box;
    position: fixed;
    inset: 0;
    margin: auto;
    width: var(--cards-container-size);
    height: var(--cards-container-size);

padding: var(--cards-container-padding);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
  @media (min-width: 800px) {
    .cards-container {
      --radius: 30vw;
      --label-size: 40px;
      --label-dot-size: 15px;
      --label-line-h-current: 4rem;
      --title-top: 4rem;
      --info-top: 8rem;
    }
  }
  @media (min-width: 1200px) {
    .cards-container {

--label-size: 50px;
      --border-color: var(--label-color);
      --info-width: min(100% - 2rem, 65%);

}
  }
  .cards {
    position: absolute;
    inset: var(--cards-container-padding);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease-in-out var(--duration);
    list-style: none;
  }

.cards li {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    transform-origin:center;
    display: grid;
    place-content: center;
    transform: rotate(calc(var(--i) * 360deg / var(--items)));
    pointer-events: none;
  }

.cards li > label {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: translateY(var(--label-offset));
    width: var(--label-size);
    height: var(--label-size);
    cursor: pointer;
    pointer-events: initial;
    text-align: center;
    color: var(--label-color);
    transition: var(--duration) ease-in-out;

}
  .cards li > label::before{
      content: '';
      position: absolute;
      top: var(--cards-container-padding);
      left: 50%;
      translate: -50% 0;
      width: var(--label-dot-size);
      height: var(--label-dot-size);
      aspect-ratio: 50%;
      border-radius: 50%;
      background-color: var(--label-color);
      transition: background-color var(--duration) ease-in-out;
  }

.cards li > label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 5px;
    width: 2px;
    height: var(--label-line-h);
    background-color: steelblue;
    transition: height 300ms ease-in-out var(--label-line-delay,0ms);
  }
  .cards li > label:hover{
    --label-color: var(--label-color-hover);
  }

.cards > li > h2,
  .cards > li > p{
    position: absolute;
    left: 50%;
    text-align: center;
    transform: translate(-50%, 0);
    transform-origin: center;
  }
  .cards > li > h2{
    top: var(--title-top);
    opacity: var(--title-opacity,0);
    translate: 0 var(--title-offset-y);
    transition: var(--duration) ease-in-out var(--title-delay,0ms);
  }
  .cards > li > p{
    top: var(--info-top);
    margin: 0 auto;
    width: var(--info-width);
    z-index: 2;
    font-size: clamp(.8rem, 2.5vw + 0.05rem, .9rem);
    text-wrap: balance;
    opacity: var(--info-opacity,0);
    translate: 0 var( --info-offset-y);
    transition: var(--duration) ease-in-out var(--info-delay,0ms);
  }

/* update custom properties for checked item */
  li:has(input:checked){
      --label-opacity: 1;
      --label-color: var(--label-color-hover);
      --label-line-h: var(--label-line-h-current);
      --label-line-delay: calc(var(--duration) * 2);

--title-opacity: 1;
      --title-offset-y: 0;
      --title-delay: calc(var(--duration) * 3);

--info-opacity: 1;
      --info-offset-y: 0;
      --info-delay: calc(var(--duration) * 4);
      /*outline: 1px dashed red;*/
  }

/* rotate container based on checked radio */
  .cards:has(input:checked) {
    transform: rotate(calc(var(--base-rotation) - (var(--index) * var(--full-circle) / var(--items))));
  }
  /*
  this would be so much simpler if we could use counter values as custom property values
  */
  .cards:has(li:nth-child(1)>input:checked) { --index: 0; }
  .cards:has(li:nth-child(2)>input:checked) { --index: 1; }
  .cards:has(li:nth-child(3)>input:checked) { --index: 2; }
  .cards:has(li:nth-child(4)>input:checked) { --index: 3; }
  .cards:has(li:nth-child(5)>input:checked) { --index: 4; }
  .cards:has(li:nth-child(6)>input:checked) { --index: 5; }
  .cards:has(li:nth-child(7)>input:checked) { --index: 6; }
  .cards:has(li:nth-child(8)>input:checked) { --index: 7; }
  .cards:has(li:nth-child(9)>input:checked) { --index: 8; }
  .cards:has(li:nth-child(10)>input:checked) { --index: 9; }
  .cards:has(li:nth-child(11)>input:checked) { --index: 10; }
  .cards:has(li:nth-child(12)>input:checked) { --index: 11; }
  .cards:has(li:nth-child(13)>input:checked) { --index: 12; }
  .cards:has(li:nth-child(14)>input:checked) { --index: 13; }
  .cards:has(li:nth-child(15)>input:checked) { --index: 14; }
  .cards:has(li:nth-child(16)>input:checked) { --index: 15; }
  .cards:has(li:nth-child(17)>input:checked) { --index: 16; }
  .cards:has(li:nth-child(18)>input:checked) { --index: 17; }
  .cards:has(li:nth-child(19)>input:checked) { --index: 18; }
  .cards:has(li:nth-child(20)>input:checked) { --index: 19; }
  .cards:has(li:nth-child(21)>input:checked) { --index: 20; }
  .cards:has(li:nth-child(22)>input:checked) { --index: 21; }
  .cards:has(li:nth-child(23)>input:checked) { --index: 22; }
  .cards:has(li:nth-child(24)>input:checked) { --index: 23; }
  .cards:has(li:nth-child(25)>input:checked) { --index: 24; }
  .cards:has(li:nth-child(26)>input:checked) { --index: 25; }
}

Linha do tempo da roda - CSS puro

Recomendado

WEB SITE DA APPLE

Diagrama de Venn animado

Fundo animado Matrix

HTML

CSS

JS

Recomendado

WEB SITE DA APPLE

Diagrama de Venn animado

Fundo animado Matrix

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS