Rueda de la fortuna

Abrir en el editor Publica tu código

Recomendado

28 June 2025

Navegación de la barra lateral HTML del panel de control de OMIC EST

15 September 2024

.wheel {
    border: 2px solid black;
    border-radius: 50%;
    margin-left: 50px;
    position: absolute;
    height: 55vw;
    width: 55vw;
    max-width: 500px;
    max-height: 500px;
    animation-name: wheel;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  .line {
    background-color: black;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 0%;
  }
  
  .line:nth-of-type(2) {
    transform: rotate(60deg);
  }
  .line:nth-of-type(3) {
    transform: rotate(120deg);
  }
  .line:nth-of-type(4) {
    transform: rotate(180deg);
  }
  .line:nth-of-type(5) {
    transform: rotate(240deg);
  }
  .line:nth-of-type(6) {
    transform: rotate(300deg);
  }
  
  .cabin {
    background-color: red;
    width: 20%;
    height: 20%;
    position: absolute;
    border: 2px solid;
    transform-origin: 50% 0%;
    animation: cabins 10s ease-in-out infinite;
  }
  
  .cabin:nth-of-type(1) {
    right: -8.5%;
    top: 50%;
  }
  .cabin:nth-of-type(2) {
    right: 17%;
    top: 93.5%;
  }
  .cabin:nth-of-type(3) {
    right: 67%;
    top: 93.5%;
  }
  .cabin:nth-of-type(4) {
    left: -8.5%;
    top: 50%;
  }
  .cabin:nth-of-type(5) {
    left: 17%;
    top: 7%;
  }
  .cabin:nth-of-type(6) {
    right: 17%;
    top: 7%;
  }
  
  @keyframes wheel {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
     }
  }
  
  @keyframes cabins {
    0% {
      transform: rotate(0deg);
    }
    25% {
      background-color: yellow;
    }
    50% {
      background-color: purple;
    }
    75%{
      background-color:yellow;
    }
    100% {
      transform: rotate(-360deg);
    }
  }

Rueda de la fortuna

Recomendado

Navegación de la barra lateral HTML del panel de control de OMIC EST

Vídeo de fondo

Un código de Metehan

HTML

CSS

JS

Recomendado

Navegación de la barra lateral HTML del panel de control de OMIC EST

Vídeo de fondo

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS