Línea de tiempo de la rueda - CSS puro

Abrir en el editor Publica tu código

Recomendado

26 September 2024

Efecto de luz en el ícono social

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

Línea de tiempo de la rueda - CSS puro

Recomendado

Juego de pila

Efecto de luz en el ícono social

Un código de Metehan

HTML

CSS

JS

Recomendado

Juego de pila

Efecto de luz en el ícono social

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS