Línea de tiempo de la rueda - CSS puro

1,844 zegarkidawida

Abrir en el editor Publica tu código

Recomendado

26 January 2025

Un código de Redllowge

16 August 2024

Tienda de tokens de Discord

14 October 2023

Panel de tarjetas

HTML

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