Chronologie de la roue - CSS pur

Ouvrir dans l'éditeur Publiez votre code

Recommandé

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

Chronologie de la roue - CSS pur

Recommandé

Boutons Dégradé Hover

jeu de pile ou face

Un code de Landingpage1

HTML

CSS

JS

Recommandé

Boutons Dégradé Hover

jeu de pile ou face

Un code de Landingpage1

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS