Le safari de microinteraction

999 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 November 2025

Un code du texte

26 May 2025

Un code par mironovbogdan341

19 May 2025

animation moderne

HTML

CSS

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