O safári de microinteração

Abrir no Editor Publique Seu Código

Recomendado

4 June 2025

.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: #000;
}
.button {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 50px;
  margin-bottom: 20px;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 50px;
  background-color: #F8F8F2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.button:hover::before {
  transform: scaleX(1);
}

.form-input {
  background: transparent;
  border: none;
  color: #F8F8F2;
  width: 200px;
  padding: 10px;
  border-radius: 8px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.form-input:focus {
  opacity: 1;
}

.spinner {
  border: 4px solid #F8F8F2;
  border-top: 4px solid #AE81FF;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-right: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

O safári de microinteração

Recomendado

Um código de Mete

falha na máquina da realidade

animação de avião

HTML

CSS

JS

Recomendado

Um código de Mete

falha na máquina da realidade

animação de avião

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS