Webleb - UI Elements - Shapeshifter Showdown

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 */
  }
}

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS