Rueda de la fortuna

1187 ASKMUHAMMAD_2K

Abrir en el editor Publica tu código

Recomendado

23 July 2025

Página de inicio de sesión

24 July 2025

Stickman HTML con estructura de gancho de agarre

21 July 2024

Formulario de inicio de sesión animado

HTML

CSS

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

Recomendado

Página de inicio de sesión

Stickman HTML con estructura de gancho de agarre

Formulario de inicio de sesión animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS