Confrontation des métamorphes

202 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 August 2025

Animation CSS d'un vaisseau spatial extraterrestre avec des étoiles

13 June 2025

Effet de survol des cartes

28 November 2024

Page de destination – Piratage

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é

Animation CSS d'un vaisseau spatial extraterrestre avec des étoiles

Effet de survol des cartes

Page de destination – Piratage

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS