Confrontation des métamorphes

616 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 August 2025

Curseur accordéon HTML des spécifications de la voiture

16 July 2025

Scène CSS avec guirlandes lumineuses et escaliers

9 September 2024

Basculement des émoticônes

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #111;
}

/* Animação do Shapeshift Showdown */
.shapeshifter_container {
  position: relative;
  width: 200px;
  height: 200px;
}

.shape {
  position: absolute;
  width: 100px;
  height: 100px;
  animation: shapeDance 3s linear infinite;
  background-color: #F92672;
}

.shape.shape1 {left: 50px; top: 50px; transform-origin: 50% 50%;} /* Definição da primeira forma */
.shape.shape2 {left: 100px; top: 100px; transform-origin: 50% 100%;} /* Definição da segunda forma */

@keyframes shapeDance {
  0% {
    transform: rotate(0deg) scale(1); 
    opacity: 1;
  }
  50% {
    transform: rotate(360deg) scale(1.2); /* Rotacionar e aumentar o tamanho na metade do loop */ 
  }
  100% {
    transform: rotate(720deg) scale(1); 
    opacity: 0; /* Reduzir a opacidade no final do loop */
  }
}

Recommandé

Curseur accordéon HTML des spécifications de la voiture

Scène CSS avec guirlandes lumineuses et escaliers

Basculement des émoticônes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS